近几年基本都在写vue项目，vuex在每个项目中基本都会用到，每次都是按照语法匆匆用，先实现需求，完成工作，用的也不是很规范，设计的也不是很合理，有一般的普通用法，也有高级用法，今天决定彻底搞懂各种用法后，仔细梳理出来。
作为一个圈子中的人，决定输出一下文档，如果你仔细看完这篇文章，保证你对vuex熟练掌握。
1.先说一下vuex到底是什么？
vuex是一个专门为vue框架开发的管理状态模式，可以理解为在data中的属性，需要共享给其他组件使用的部分，使用vuex进行统一管理。
2.vuex中，有默认的五种基本的对象：
- state：存储状态（变量）
- getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用
$sotre.getters.fun() - mutations：修改状态，并且是同步的。在组件中使用
$store.commit('',params)这个和我们组件中的自定义事件类似。 - actions：异步操作。在组件中使用是
$store.dispath('') - modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
下面我们正式开始，一步步来使用vuex:
在vue项目的src目录下创建store文件夹，文件夹的目录按上面红框里的建出来就可以了~~~
3.引入vuex，我们需要先下载vuex，并且引入它
在编辑器的终端里 输入npm install vuex --save指令，安装vuex
安装成功后，在store文件夹的index.js入口文件中引入：
import Vue from "vue";
import Vuex from "vuex";
import state from "./state";
import mutations from "./mutations";
import user from "./modules/user";
import getters from "./getters";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user
},
state,
mutations,
getters
});
export default store;
4.接着，在main.js里引入store，全局引入：
import App from "./App.vue";
import router from "./router/index";
import store from "./store/index";
// 第三方包
import "element-ui/lib/theme-chalk/index.css"; //element-ui样式
import ElementUI from "element-ui";
Vue.config.productionTip = false;
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
采坑注意事项：import store from "./store/index"; 一定要这样写，省略index，项目运行会报错，找不到vuex里所有的选项，以为项目会自己找到index这个入口文件,实际上并没有，看到文档的大家注意了~~~~喇叭
5.继续操作store文件夹
我们在state.js文件中,定义一个testData测试数据，并做缓存处理，这样的需求适合项目常用的token处理：
// 默认测试数据
const defaultTestData = "周六";
try {
if (localStorage.testData) {
defaultTestData = localStorage.testData;
}
} catch (error) {}
export default {
isCollapse: false, //是否折叠菜单
testData: defaultTestData //测试数据
};
6.我们在mutations.js文件中，该对象中有一个个方法，用来改变state里定义的值，这里也做了缓存处理
// 是否折叠菜单
collapseMenu(state) {
state.isCollapse = !state.isCollapse;
},
//改变测试数据的方法
CHANGE_TEST_DATA(state, newTestData) {
state.testData = newTestData;
try {
localStorage.testData = newTestData;
} catch (error) {}
}
};
7.在vue组件或者页面中，调用测试数据testData，使用它，
<div>今天是{{ testData }}</div>
script中：
import { mapState } from 'vuex'
computed: {
// vuex 获取state 里的值
...mapState(['testData']),
},
这样就可以取到值了，这个用的mapState的高级用法，是语法糖
或者this.$store.state.testData也可以取到值，这就是普通用法，2种用一种就可以了
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
8.vuex中模块化的用法：
在store文件夹中，建modules文件夹，这里面管理所有模块，例如我们建一个user.js文件，
我们把用户信息都在这里储存，登录接口和登出接口也可以再这里调用。
const user = {
state: {
userInfo: { name: "韩梅梅", age: 20 } //用户信息
},
mutations: {
SET_USER_INFO(state, userInfo) {
state.userInfo = userInfo;
}
},
// 改变的方法
actions: {
setUserInfo({ commit }, userInfo) {
commit("SET_USER_INFO", userInfo);
}
}
};
export default user;
解析：每个文件储存 state、mutations、actions，全部写完，其中state存值userInfo用户信息、mutations里是改变值的方法、actions是异步改变的方法，可以调用登录接口拿到用户信息赋值。
9.接着在getters.js中取我们的state，因为它算是state的一个计算属性
userInfo: state => state.user.userInfo
};
export default getters;
到这里，如果全都看懂了，vuex你已经没有压力了。
10.在vue组件或者页面中，使用userInfo的用法如下：
computed: {
// vuex取值普通用法
userInfo() {
return this.$store.getters.userInfo
}
},
html中的用法，直接用就可以了
<div>{{ userInfo.name }},今年{{ userInfo.age }}</div>
2.取userInfo的值的高级用法：
```import { mapGetters} from 'vuex'
computed: {
// vuex取值高级用法 mapGetters
...mapGetters(['userInfo'])
},
html中的用法，直接用就可以了
<div>{{ userInfo.name }},今年{{ userInfo.age }}</div>
11.在vue组件或者页面中，用Actions改变userInfo值的方法，这个是异步的
1.在methods直接写改变方法，然后在mounted中调用
// 调用action普通用法
this.setUserInfoUsed();
},
methods: {
// actions 改变vuex中的值 普通用法
setUserInfoUsed() {
this.$store.dispatch('setUserInfo', { name: '张无忌', age: 26 })
},
}
普通用法需要 this.$store.dispatch改变值，第一个参数是mutauions中封装的改变方法名，第二个参数是新值。
2.mapActions改变值的高级用法：
data() {
return {
params: { name: '赵敏', age: 26 }
}
},
mounted() {
// 调用action高级用法
this.changeData(this.params);
},
methods: {
// mapActions 高级用法 步骤1
...mapActions({
changeData: 'setUserInfo'
}),
// mapActions高级用法 步骤2
changeData(...params) {
return this.$store.dispatch.apply(this.$store, ['setUserInfo'].concat(params))
},
}
解析：changeData是改变值的方法，高级用法扩展的时候需要用键值对的形式绑定，如果键值一样也可以直接下写一个，这里为了区分，写了不一样的方法名。
这个就不需要dispatch方法了，不过个人认为，普通用法根据简洁，不用引用和扩展，2种方法都能实现，这个随大家心情，都可以用~~~~
12.在vue组件或者页面中，用Mutations改变userInfo值的方法，这个是同步的
1.在methods直接写改变方法，然后在mounted中调用
// 调用mutations 普通用法
this.setNewData();
},
methods: {
// mutations提交改变值的方法 普通用法
setNewData() {
this.$store.commit('SET_USER_INFO', { name: '令狐冲', age: 27 })
},
}
普通用法需要 this.$store.commit改变值，第一个参数是mutauions中封装的改变方法名，第二个参数是新值。
2.mapMutations改变值的高级用法：
data() {
return {
params2: { name: '任盈盈', age: 18 },
}
},
mounted() {
// 调用mutations 高级用法
this.setNewDataHeight(this.params2);
},
methods: {
// mutations提交改变值的方法 高级用法 temp1
...mapMutations({ 'setNewDataHeight': 'SET_USER_INFO' })
// mutations提交改变值的方法 高级用法 temp2
setNewDataHeight(obj) {
return { name: obj.name, age: obj.age }
},
}
解析：setNewDataHeight是改变值的方法，高级用法扩展的时候需要用键值对的形式绑定，如果键值一样也可以直接下写一个，这里为了区分，写了不一样的方法名。
这个就不需要commit方法了，不过个人认为，普通用法根据简洁，不用引用和扩展，2种方法都能实现，这个随大家心情，都可以用~~~~
以上就是vuex的普通用法和高级用法了，进阶的话就用高级用法，当然普通用法也能满足项目需求，最后，如果大家发现有什么问题，或者错误的地方，欢迎留言交流~~~~
当你的才华还撑不起你的野心的时候，你就应该静下心来学习；当你的能力还驾驭不了你的目标时，就应该沉下心来，历练；梦想，不是浮躁，而是沉淀和积累，只有拼出来的美丽，没有等出来的辉煌，机会永远是留给最渴望的那个人。
