前言
vuex作为Vue框架的状态管理库，用的好，可以很好的帮我们，减少工作量，管理好状态，减少代码的体积，达到一种优化的效果。因为Vue的数据传输是一种单向数据流的设计方案，所以，vuex也遵循了这样的方案。vuex是做为vue-cli的一个插件的形式存在的。你可以使用，也可以不使用，是一种灵活的配置方式。
怎么配置vuex在vue-cli中
第一步，首先执行命令：npm install vuex
第二步，在src这个目录下面，新建/store/index.js文件
第三步，在main.js中，引入自己创建的/store/index.js，在new Vue({store})中使用，这样就算配置成功了。你可以在一个页面中，打印一下this.$store
怎么使用vuex在项目中
在store/index.js中，我们要引入vue，vuex。然后用Vue.use(vuex)的方法。就表示vuex插件使用起来了。然后我们就要new Vuex.Store,再把这个导出来。具体代码如下：
import Vue from 'vue'
import Vuex from 'vuex'
const store = new Vuex.Store({
state: {},
getters: {}
mutations:{},
actions:{}
})
export default store
state怎么使用
state就相当于组件中的data选项一样，里面的变量名不能重复，且是唯一的。当你在state中定义了一个变量，怎么把他引入到.vue的文件中去使用呢？我们可以使用mapState这个vuex提供的方法。mapState使用方法很多，详见vuex文档。我习惯于使用这样的方式，每个人有不同的习惯。没有对错的。
computed:{
...mapState['user']//你定义变量的名字
}
getters怎么使用
getters里面放的，就是我们要对state里面的数据做一下过滤的，然后返回到页面的数据。相当于我们在页面中使用computed属性。那在页面中，我们要怎么去使用呢？
import { mapGetters } from 'vuex'
computed: {
...mapGetters([
'VipUser'
// ...
])
}
actions和mutations要怎么去使用
actions我们可以在里面做异步的数据请求的，请求成功之后，通过mutations去修改state里面数据的状态。从而达到了单向数据流的特点。至于什么时候你去请求和做修改，取决你于什么时候调用的。mutations对象里面的方法有两个参数，一个是state，一个你传过来的形参(可以为任意的)。然后这里面就做一件事情，就是把形参的值复制给state里面你想修改的参数。在额main中如何使用，我已经在下面举出例子了。
mutations:{
addUser(state,p){
}
}
//在页面中使用
import { mapMutations } from 'vuex'
...mapMutations([
'addUser', // 将 `this.addUser()` 映射为 `this.$store.commit('addUser')`
]),
this.addUser()//就可以调用了，一般在声明周期中调用
actions这个对象，他里面的方法，有三个参数。第一个参数是context,这个参数，我们可以解构出两个值，一个是commit，state，第三个参数是你传进来的形参，一般是你传入的形参，如果请求用户的信息。你要传userId过来，这个时候，P就起作用了，这里面可以直接写axios的请求。
actions:{
getUser({commit,state},p){
axios.get("/xxx/xxx/xxxx").then(res=>{
})
}
}
vuex的配置大致是这样的。但是大家可以想一下，为啥都要是对象这样的结构来做vuex，而不是数组或者其他，比如vue-router这样的就是就是要配置的是一个数组。还有当vuex里面的数据非常多的时候，这个时候代码不容易阅读，也不利于维护。这个时候我们应该怎么去做。有没有更加好的方法。还有就是让你去实现一个vuex，你会这么去实现这样的库，他里面的思想是什么，会用只是停留在表面的东西。
