vuex的使用

        在vue项目开发中，为了解决多页面数据共享的问题，我们往往通过vuex来进行解决，这篇文章主要讲解vuex的主要语法，记录一下自己的看法，学习的话，最好还是看官网，官网，官网（重要的事情说三遍），附官网地址：vuex官网。

一、vuex的五大核心讲解

        1.State（单一状态树）

                主要进行状态数据的存储

        2.Getter（可以认为是 store 的计算属性）

                getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

        3.Mutation（唯一可以更改state数据的方法）

                每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，可以传递多个参数，在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读。我们没办法直接调用这个方法，需要以相应的 type 调用 store.commit 方法。mutation 必须是同步函数。

        4.Action（进行异步操作的地方，但是也只能通过commit去更改数据状态）

                在组件中我们可以通过store.dispatch去触发Action中的方法，再在Action中通过commit去触发Mutation里面的方法从而进一步的更改state中的数据。

        5.Module

                store分模块化管理

 二、搭建一个store仓库

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {//仓库主要用于存放全局状态数据
    count: 0,
  },
  mutations: {//存放更改state仓库数据的方法，通过commit去触发，只有mutations里面的方法可以更改state中的数据
    changCount(state) {
      state.count++;
    }
  },
  actions: {},
  modules: {},
});

三、更改state数据

//在项目的vue文件中，通过方法去触发store里面mutations里面的方法。去改变state里面的值
methods: {
    changCount() {
      this.$store.commit("changCount");
      console.log(this.$store.state.count);
    },
  },

四、获取getter属性数据（类似于计算属性，如果不了解计算属性请看：vue中computed与watch）

//设置
getters:{
    newCount:state=>{
      return state.count*0.8
    }
  },
//获取
this.$store.getters.newCount

五、在Action中去更改state中的数据

//store
export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    changCount(state) {
      state.count++;
    },
    changCount1(state) {
      state.count = 0;
    }
  },
  getters:{
    newCount:state=>{
      return state.count*0.8
    }
  },
  actions: {
    aaa({commit}){
      commit("changCount")
    }
  },
  modules: {},
  plugins: [
    createLogger(), // 2、
    createPersistedState( )
  ]
});
//组件
 methods:{
    changCount(){
      this.data++
      this.$store.dispatch("aaa")
      console.log(this.$store.state.count);
    }
  }

六、Module（进行store模块化的分割，避免代码太过臃肿）

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

vuex持久化插件

import Vue from 'vue'
import Vuex from 'vuex'
// 1、引入logger插件
import createLogger from 'vuex/dist/logger'
  // 3、安装 npm i vuex-persistedstate -S
  // 4、引入
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  	a:0,
    b:0,
    numArr:[]
  },
  mutations: {
  	adda(state){
  		state.a++
  	},
    addb(state){
      state.b++
    },
    addNum(state,num){
      state.numArr.push(num)
    }
  },
  actions: {
  
  },
 
  	plugins: [
      createLogger(), // 2、
      createPersistedState()
    ]
})