vuex是一个与vue一起使用的状态管理工具。我一般用它来保存一些全局的数据，比如用户登录信息，用户身份信息，总之就是很多页面用到的一些信息都保存在vuex中，使用的时候不需要请求接口，直接直接去vuex搞定。先把官网地址安装npminstallvuex--saveconfiguration。我其实是在vue-cli环境下使用vuex的，所以这里我以这个环境作为项目文件结构来写配置。先在src/assets文件夹下新建vuex/store.js文件，然后在文件中写入如下代码：importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.Store({state:{name:'xiaoming',count:1}})exportdefaultstoreIntroducestore.js:importstorefrom'@/assets/vuex/store'inmain.js;在全局构造函数中注册：（这里别忘了）newVue({el:'#app',router,components:{App},template:'',store:store//注册store下root实例，相当于全局注册，可以全局调用})//题外话//在vue-cli中，某些后缀的文件不需要写全后缀，就像上面的store一样//因为在config/webpack的.base.conf.js文件中，有这样一段代码：resolve:{extensions:['.js','.vue','.json'],//Thefileswith这些后缀可以省略，可以随意加上alias:{//模块别名定义，方便后面直接引用别名，不用写长地址'vue$':'vue/dist/vue.esm.js','@':resolve('src'),//开始从src文件夹中寻找文件}}至此，vuex已经安装到你的项目中，可以使用了。只需要在vue的html部分写如下代码：
{{$store.state.name}}
//页面会显示'xiaoming'或者在构造函数中写：console.log(this.$store.state.name);//打印'xiaoming'html代码写值的时候可以不加这个，必须在脚本代码中加这个。使用1.State对象访问（我把state理解为Vue构造函数中的数据）state存储了一些数据，比如用户名，性别，身份证号等。我之前的访问方式是：{{$store.state.name}}但是上面的写法太长了，看起来不直观。查阅文档后发现访问state对象有3种方式：//如果我想在页面中只写{{name}}，可以这样写：1.computed:{name(){返回this.$store.state.name；}}2.从'vuex'导入{mapState}；computed:mapState({name:state=>state.name//es6arrowfunction})3.import{mapState}from'vuex';计算：mapState(['name']);//这是最简单的写法，推荐2.访问mutations方法（我把mutations理解为vue构造函数中的方法）先在store.js中写如下代码：conststore=newVuex.Store({state:{name:'xiaoming',count:1},mutations:{add(state,num){//接收一个外部参数state.count+=num;},reduce(state){state.count--;}}})本来我调用add和reduce方法时，写法是：
{{count}}
点击即可加十点击减一但是这个调用方法的写法太长了，需要写$store之类的.commit，这太冗长了。模仿访问状态的方法，它还有另一种方便的写法：import{mapState,mapMutations}from'vuex';methods:mapMutations(['add','reduce']),//需要注意的是state写在computed中，mutations写在methods中，因为是@click之后的方法现在可以这样调用:{{count}}
点击添加十个点击tosubtractone3.访问getters（我理解getters是在vue构造函数中计算出来的）getters就像一扇门，每一次操作数据，都会经过一次。现在，在store.js中添加getter代码：conststore=newVuex.Store({state:{name:'xiaoming',count:1},mutations:{add(state,num){//接收一个外部参数state.count+=num;},reduce(state){state.count--;}},getters:{add100(state){returnstate.conut+=100;//每次计数都会加100},changename(state){returnstate.name+'c';//name每次操作都会拼接一个c}}})怎么调用呢？模仿状态的调用方式。因为都是对数据进行操作，不涉及方法，所以getter也写成computed。import{mapState,mapMutations,mapGetters}from'vuex';//现在看看computed的代码怎么写//在写state的时候，我们把computed中的代码写成这样：//computed:mapState(['name']);//如果你现在添加mapGetters，你需要改变computed的外观。具体应该这样写：computed:{...mapState(['name','count']),//es6扩展运算符，使用map时必须使用这个，否则会报错。..mapGetters(['add100','changename']),count2:function(){returnthis.$store.state.count;}}此时，每操作一次button按钮，无论是加法还是减法，都会对计数进行一次+100的操作。当然这个时候名字是不会改变的，即使你引入了changename方法，但是因为名字还没有改变，所以不会触发changename方法。4.访问actionsActions类似于getters，但是是异步调用，写在methods中。（说实话，我没看懂这些action的用法）首先，我们改进一下我们store.js中的代码：conststore=newVuex.Store({state:{name:'xiaoming',count:1},mutations:{add(state,num){//接收外部参数state.count+=num;},reduce(state){state.count--;}},getters:{add100(state){returnstate.conut+=100;//count每操作一次，就加100},changename(state){returnstate.name+'c';//name每操作一次，就拼接一个c}},actions:{add1(context){//参数context为全局上下文对象，storecontext.commit('add',10);//通过上下文调用add方法setTimeout(()=>{context.commit('reduce')},3000)},reduce1({commit}){//{commit}是另一种传参方式，打包commitcommit('reduce');}}})写完后actions方法，它会去调用它，调用方法类似于mutations：methods:{...mapMutations(['add','reduce']),...mapActions(['add1','reduce1']),aa(i){console.log(i)}}在html代码中使用：additionsubtractionreduce1方法调用mutations中的reduce方法，每点击一次减1；add1调用mutations中的add方法，每次点击加10，3秒后调用subtraction减1；因为有getters设置，每次操作加100多，一般用法的。我通常只使用状态更多。本人对vuex的理解很浅，不对的地方还请指正。
