针对Vuex的详细操作

1、什么是vuex

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

2、vuex由五部分组成

• state：数据
• mutations：只能通过它来改变数据
• actions：异步操作
• getters：类似于vue组件中的计算属性，对state数据进行计算（会被缓存）
• modules：模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

3、如何使用

1、安装：
cnpm install vuex --save
2、在main.js中引入vuex：
import store from “./store”;
store中：

vue组件中：

上面的mutations为同步操作，
异步操作要用到actions
actions不能直接操作state，只能调用mutations操作

在组件中使用dispatch调用

4、高级用法——数据持久化

因为每次刷新页面，存储在vuex里的state会丢失。
为了解决刷新页面数据丢失，才有了数据持久化。
最简单的用法就是用 vuex-persist 插件。

1. 安装
   cnpm install vuex-persistedState -S
   注意：
   -S 是–save的简写，意为：把插件安装到dependencies（生产环境依赖）中
   -D是–save-dev的简写，意为：把插件安装到devDependencies（开发环境依赖）中
   在仓库中进行引入和配置：
   

5、高级用法——辅助函数（语法糖）

下面这四个辅助函数被称为四大金刚：
mapState
mapActions
mapMutations
mapGetters
辅助函数可以把vuex中的数据和方法映射到vue组件中。达到简化操作的目的。