vuex的基本使用 整理(vue状态管理)

vuex可以用来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，适用于多组件共用同一个状态值的情况。

首先，需要一个vue项目，新建一个空文件夹，在该文件夹目录下命令行输入（使用webpack创建一个项目名为web的项目）：

vue init webpack web

项目创建后，然后安装vuex，在项目目录下命令行输入：

npm install vuex --save

然后我们在项目目录下执行npm run dev 启动项目，在浏览器输入：“localhost:8080”；正常的话然后我们会看到项目的启动页，

看到这个界面说明项目启动成功，然后我们在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例。然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：

然后我们在main.js文件中引入该文件，再在vue实例全局引入store对象：

然后就可以开始编写vuex业务代码了

State

vuex中的数据源，我们需要保存的数据就保存在这里，在页面上通过 this.$store.state来获取我们定义的数据：

这时候页面上就得到了这个count值为1：

Getters

getter 相当于vue的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果

修改index.js文件如下，其中getters中的getStateCount方法接收一个参数state，这个参数就是我们用来保存数据的那个对象：

这时页面上显示：

Mutations

只放在store中的值是不变的，如果需要修改store中的值唯一的方法就是提交mutation来修改。修改index.js文件，添加mutations，在mutations中定义两个函数，用来对count加1和减1：

Hello World.vue文件中添加两个按钮，一个加1，一个减1；这里我们点击按钮调用addFun（执行加的方法）和reductionFun（执行减法的方法），然后在里面直接提交mutations中的方法修改值：

页面上点击+、- 按钮操作数据：
如点击 “+”按钮，方法调用成功~

Actions

我们看到，当点击+按钮后，页面上的值是改变了；我们达到了修改store中状态值的目的，但是，官方并不建议我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值，接下来我们修改index.js文件，先定义actions提交mutation的函数：

修改Hello World.vue文件，把commit提交mutations修改为使用dispatch来提交actions；点击页面，效果是一样的

到这里已经实现了一个基本的vuex修改状态值的完整流程，如果我们需要指定加减的数值，那么我们直接传入dispatch中的第二个参数，然后在actions中的对应函数中接受参数在传递给mutations中的函数进行计算：

mapState、mapGetters、mapActions

如果我们不喜欢这种在页面上使用this.$ stroe.state.count和this.$store.dispatch(‘funName’)这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了，修改Hello World.vue文件如下：

参考：5分钟带你入门vuex（vue状态管理）