做一下最近使用vuex的笔记整理
怎么安装引用就不说了，先贴一下我的index.js的结构
import Vue from "vue";
import Vuex from "vuex";
import VuexPersist from "vuex-persist";Vue.use(Vuex);// vuex长久化储存组件
const vuexLocal = new VuexPersist({
storage: window.localStorage //可选，sessionStorage/indexDB
});
export default new Vuex.Store({
state: {},
mutations: {},
getters: {},
actions: {},
modules: {},
plugins: [vuexLocal.plugin]
});
1.首先vuex安装之后是存储在内存的，本身只是一个公共变量，重启浏览器等使浏览器内存重置的操作会丢失，因为与业务不符，所以使用了vuex-persist组件来实现长久化储存，这个组件的存储机制应该只是给原本的vuex加了一步写进磁盘和从磁盘取出的步骤，存的时候写入内存和磁盘，取的时候我将磁盘数据删掉依然能从内存中取到，但这个存取磁盘内存的先后顺序 我没有搞清楚。
2.vuex中的五个属性state、getters 、mutations 、actions、modules
state:存储数据的地方，类似于vue文件中data的使用，由于vue单一数据源，只能有一个state.
getters:就是vue中的计算属性，我第一次用的时候被它的名字迷惑以为这个类似于get,set方法，并将取数据的操作放在这里，不过除了多走一步仿佛也没有什么毛病。getters里的方法接收的参数是state,由于我把它当做外部取数据那么用了，所以不免遇到外部传参需求，可以这么写：getValue:state=>e=>{return},e为外部参数，调用时this.$store.getters.getValue(e)
mutations: 相当于methods，用来定义方法，调用时this.$store.commit("funName", "value"); 是同步方法
actions:区别于mutations，actions里的方法可以是异步方法，返回一个promise，调用时this.$store.dispatch("funName", "value")
3.关于mutations与actions的区别
a、流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
b、角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。
c、限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。
modules:因为单一树state只能有一个，为了解决可能因此带来的不便，可以在modules里再来一套这五个属性做套娃
