什么是vuex

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么是“状态管理模式”？

图中的状态管理的各部分含义为：

*state，驱动应用的数据源；
*view，以声明方式将 state 映射到视图；
*actions，响应在 view 上的用户输入导致的状态变化。

为什么使用vuex

当我们遇到多个组件共享状态时，多层组件的传值非常繁琐，不利于维护，因此我们把组件的共享状态抽取出来，以一个单例模式管理，在这种模式下，不管在哪个组件都可以获取状态或触发行为

vuex的6的核心

state, getters, mutations, actions, modules,plugins 。

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
　　
6.plugins 数据持久化，和浏览器的localStorage（本地存储）类似

在vue框架中如何使用vuex

1.首先在全局中下载vuex
cnpm install vuex -S 下载到项目的开发环境

2.在项目中的src目录下新建一个store文件夹

3.在store文件夹中新建一个index.js文件

4.在文件中写入
import Vue from “vue”
import Vuex from “vuex”
Vue.use(Vuex)
const store = new Vuex.Store({
state:{
},
mutations:{
},
actions:{
},
gitters:{
},
modules:{
}
})

5.在main.js文件中下写入
import store from “./store”
new Vue({
store,
})

怎么在组件中引入使用（用对象解构赋值的方式来从vuex里面取出辅助函数）

引入 import { mapState,mapMutations,mapGetters,mapActions } from “vuex”

其中 mapState和mapGetters是在组件中的computed计算属性中使用

使用的方式
computed:{
…mapState([“属性名”]),
sum(){},…
}

其中 mapActions和mapMutations是在组件中的methods方法中使用
使用的方式
methods:{
…mapMutations([“方法名”]),
add(){},…

}