vuex的核心概念和运行机制

Vuex 是什么？

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

核心概念

vuex由五部分组成：State、Mutations、Actions、Getter、Module
vuex 四大辅助函数 mapState 、mapGetters 、 mapMutations 、mapActions

• state： 储存初始化数据
• mutations：唯一可以修改state里的数据的场所
• actions：可以包含异步操作，可以调用mutations的方法操作state里的数据
• getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）
• modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

运行机制

1. .客户端操作事件，dispath()方法触发actions，叫action改数据，但是action没有权限改，只能向上级（mutations）汇报，通过commit()提交。并且actions里面的行为和mutamutions的行为要一至。
2. actions提交过来，通过commit()触发mutamutions，然后更新状态。
3. 数据的单独处理getters：例如state里面有价格的处理，过滤器过滤后变成单独的功能放到getters里面封装成一个get方法，然后组件上$state.getters直接调用。
4. state更改后对应的view视图在render的作用下重新渲染

如何使用

方法1、直接调用

// 直接调用state里的数据
this.$store.state.name
// 调用mutations里的方法，并传递数据 参数一：mutations定义好的方法名，参数二：要传递的数据
this.$store.commit('addUser',obj)

方法2、映射----> 辅助函数

映射过来的数据可以直接使用。

// 1、在组件内引入vuex
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

// 2、解析  
//  mapActions,mapMutations,要在methods方法里解析
methods: {
	// 以对象的形式解析
 ...mapActions({
     setToken: 'setToken'
   }),
   // 以数组的形式解析
...mapMutations(['setToken']),
}，
// mapGetters ， mapState 要在 computed计算属性里解析
computed: {
   ...mapState(['userid']),
   ...mapGetters(['TotalPrice']),
 },

数据持久化

问题：存储在vuex中的状态，刷新页面，会丢失。
为了解决刷新页面数据丢失，才有了数据持久化。

安装插件：

最简单的做法就是利用插件 vuex-persistedState。

cnpm install vuex-persistedState -S

-S 是--save的简写，意为：把插件安装到dependencies（生产环境依赖）中
-D是--save-dev的简写，意为：把插件安装到devDependencies（开发环境依赖）中

使用：

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
})