vuex 简介
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
通俗的来说，vuex是用于当某一状态需要在多个组件中共享，方便我们使用并追踪这些状态时使用。
话不多说：开始介绍。
1，vuex的总体结构
vuex的总体结构分为 modules下面的所有子模块和根模块（即全局状态） 这里我把rootState这个根模块放到了modules文件夹的外面，当然也可以放到里面；最后就是在index 进行统一使用。
2，各子模块的内部结构及作用
这是一个弹窗组件的内部结构，所有的子模块都是统一的这个结构；
state：存放数据状态；
action：指派mutation ；
mutation：修改state里面的状态；
getter：侧重于对数据的再次加工；
mdules：用于模块化；
总的来说，这个设计和组件传值一样，是一个单向的数据流。为什么呢：当然是为了方便管理各个状态，知道状态在哪一步发生了改变，便于状态的维护和使用；
注意：namespaced: true 命名空间这一行一定要写，这是vuex寻找子组件的依据；
注意误区：
网上很多说action里面写异步代码，mutation里面写同步代码。其实这种说法是不对的，片面的。
答：其实是为了做代码隔离；
不受控的代码集中到action； mutation只做纯函数的状态改变（也就是赋值语句）
/**
* 弹窗组件模块 属于子模块
*/
const state = {
dialog: '我是dialog',
};
// 使用 mutation更新 state
const mutations = {
commitDialog: (state, dialog) => (state.dialog = dialog),
};
const actions = {
// 把 commit属性从 context里面解构出来
setDialog: ({ commit }, dia) => commit('commitDialog', dia),
};
// 把数据导出时可以对数据做一些操作 但不会改变原数据
const getters = {
currentDialog: (state) => state.dialog + '123',
};
export default {
state,
mutations,
actions,
getters,
namespaced: true,
};
3，index 文件的结构
上面是引入各个子模块的文件，下面在modules对象里面使用，要注意根模块一定要放在modules外面，因为他是特殊的，这边用扩展运算符直接把roortState解构进来了。
注意：这里面用到了持久化缓存插件 vuex-persistedstate 解决了vuex刷新页面状态丢失的问题，通过这个插件把vuex里面的数据都储存到了localStorage里面；当然你也可以放到sessionStorage里面；只不过要这样写：
plugins: [createPersistedState({
storage: window.sessionStorage
})]
import Vue from 'vue';
import Vuex from 'vuex';
// 持久化缓存
import createPersistedState from 'vuex-persistedstate';
// 下面引入子模块
import rootState from './rootState'; // 根模块状态管理引入
import dialog from './modules/dialog';
import videoState from './modules/videoState';
Vue.use(Vuex);
export default new Vuex.Store({
...rootState, // 这里存放的是根模块 也就是全局模块
modules: {
dialog,
videoState,
},
// 把vuex里面的所有数据都储存到了localStorage里面 不用担心刷新数据丢失的问题
plugins: [createPersistedState()],
});
4，开始使用
下面代码 是在页面中通过配合辅助函数进行使用（比较方便，建议大家使用辅助函数）；
1，getDialog（）事件使用子模块dialog 里面的setDialog方法改变了子模块的状态；
2，getDialogGetter（）事件使用子模块dialog 里面的Getter属性获取了改变之后的数据；Getter用于对Store中的数据进行加工 处理形成新的数据，不会修改Store中的原数据，类似计算属性。但Store中数据发生变化，Getter的数据也会跟着变化
3，getRootState（）事件使用根组件的setRootStatue方法改变了全局状态，注意：获取根组件的方法时 后面要加上 {root:true} 来标明这是根组件；可以参考我下面的写法；
4 ，getRootState2（）事件可以直接获取根组件里面的状态；这里在业务逻辑上可以做一些判断什么的
页面的使用：
<template>
<!-- 父组件 -->
<div class="dialog">
<button @click="getDialog">使用子组件dialog里面的方法改变状态</button>
<br />
<button class="_getter" @click="getDialogGetter">获取弹窗组件getter返回的数据</button>
<br>
<button class="_getter" @click="getRootState">使用根模块里面的方法</button>
<br>
<button class="_getter" @click="getRootState2">获取根模块里面的数据</button>
</div>
</template>
<script>
// 1.引入辅助函数
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex';
export default {
name: '',
mixins: [],
components: {
},
props: {},
data() {
return {
};
},
computed: {
// mapState 和 mapGetters
...mapState('dialog', ['dialog']),
// 这里想要访问根模块里面的方法 需要这样写后面加上 {root:true}
...mapState(['rootStatue',{root:true}]),
...mapGetters('dialog', ['currentDialog']),
},
watch: {},
created() {},
mounted() {},
methods: {
// 2，使用
...mapActions('dialog', ['setDialog']),
// 这里想要访问根模块里面的方法 需要这样写后面加上 {root:true}
...mapActions(['setRootStatue',{root:true}]),
// 使用子组件dialog里面的方法改变状态
getDialog() {
console.log('之前的数据：', this.dialog);
// 3，改状态
this.setDialog('nihao');
//4，查看是否改动成功 改动成功
console.log('之后的数据：', this.dialog);
},
// 获取getter里面的内容
getDialogGetter() {
let dialogGetter = this.currentDialog;
console.log('获取getter里面返回的数据：', dialogGetter);
},
// 使用根模块里面的方法改变状态
getRootState(){
console.log('之前的数据：', this.rootStatue);
this.setRootStatue('false')
console.log('改变后的数据：', this.rootStatue);
},
// 获取根模块里面的数据
getRootState2(){
console.log("根模块的数据：",this.rootStatue);
},
},
};
</script>
<style scoped lang="scss">
.tipsDialog {
cursor: pointer;
}
._getter {
display: block;
margin-top: 10px;
}
</style>
rootState根组件里面的结构
/**
* 根模块 储存全局状态管理
*/
const state = {
rootStatue:'true',
};
// 使用 mutation更新 state
const mutations = {
commitRootStatue: (state, sta) => (state.rootStatue = sta),
};
const actions = {
setRootStatue:({commit},sta)=> commit('commitRootStatue',sta,)
};
const getters = {
};
export default {
state,
mutations,
actions,
getters,
namespaced: true,
};
5，总结
vuex中一共有五个状态 State Getter Mutation Action Module ；需要知道他们的关系和侧重点；
Action: 侧重请求数据以及对业务逻辑的判断处理等；
Mutation: 侧重于对state里面的状态的修改；
Getter : 侧重于对数据的再次加工，如果你对数据的修改或使用 不想改变原数据；那么你可以使用getter属性进行对数据的再次处理。
Modules : 侧重于对多个状态的管理和分享；
东西就这么多，多练多思考。