vuex mapstate_Vuex使用解析

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

用vuex来保存需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新。

Vuex有5种属性: 分别是 state、getter、mutation、action、module;

state: 用于数据的存储，是store中的唯一数据源。
Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。可以在页面通过 this.$store.state 来获取state。

getters：如vue中的计算属性computed一样，基于state数据的二次包装，常用于数据的筛选过滤和多个数据的相关性计算。getter的返回值会根据它的依赖被缓存起来，只有当它的依赖值发生了变化才会被重新计算。可以在.vue文件里通过 this.$store.getters.方法名 来获取，如{{this.$store.getters.getNum}}。

mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件。在.vue文件里通过 this.$store.commit("方法名") 来调用。

actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作。
actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispatch 来分发 action。在.vue文件里通过 this.$store.dispatch("方法名") 来调用。

modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护。

---

下面来新建一个Vue项目来演示Vuex的使用：

1、用vue-cli3创建一个新项目

vue create vue-demo

创建过程中勾选上vuex选项。

2、可以看到创建好的新项目文件夹里包含目录store，该store目录下包含一个vuex（index.js文件），该文件创建了Vuex.Store实例并使用export default导出。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

然后在项目的main.js文件中引入该vuex文件(在文件里的语句 import store from ./store)，并在该vue实例全局引入store对象。

项目结构如图：

3、例如，在HelloWorld.vue文件中添加两个按钮，一个执行加1一个执行减1，点击按钮调用addHandle(执行加的方法)和reduceHandle(执行减的方法)，然后在两个函数内部直接提交mutations中的方法来修改值。

4、但官方并不建议这样直接去修改store里的值，而是建议先去提交一个actions，在actions中提交mutation再去修改状态值。

把commit提交mutations修改为使用dispatch来提交actions，点击页面实现的效果一样。

另外，若需要指定加减某特定值，可直接传入dispatch中的第二个参数，然后在actions中的对应函数中接受参数再传递给mutations中的函数进行计算：

5、可使用mapState、mapGetters、mapActions来代替this.$store.state.count和this.$store.dispatch("funName")这种冗长的写法：

本文引用解析：

https://vuex.vuejs.org/zh/​vuex.vuejs.org 公司要求会使用框架vue，面试题会被问及哪些？_慕课手记​www.imooc.com

5分钟带你入门vuex（vue状态管理）​baijiahao.baidu.com