vuex辅助函数使用

辅助函数的认识：
vuex的辅助函数有4个 ：

mapState , mapGetters , mapMutations , mapActions

辅助函数的写法：
1、在页面引入

import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
2、state 和 getters 的在computed中使用   【可以使用数组和对象的形式】

 computed: {
    ...mapState(["num"]),
    ...mapGetters({ changeNum: "changeNum" }),
  },
3、mutations 和 actions 在methods中使用

  methods: {
    ...mapMutations({ addnum: "addNum" }),
    ...mapActions(["reduceNum"]),
    add() {
      this.addnum(this.a);
    },
    reduce() {
      this.reduceNum(this.a);
    },
  }
缺点：
1.适合大中型的项目

2.刷新的时候数据会丢失

解决方法：
1、我们为了保证刷新数据不丢失，需要使用固化插件

我常用的固化工具 下载及使用 ：

npm i vuex-persistedstate  -S 

使用：

在vuex中引入  

import vuexp from 'vuex-persistedstate'
在state同级注册

export default new Vuex.Store({
  plugins:[vuexp()],
  state: {
    num: 0,
  },
}
2、如果不让使用固化工具，实现持久化存储：

      只需要在调用，mutations 方法的时候保存一下就可以了

  mutations: {
	  addNum(state,data){
		  state.num+=data
		  
		  localStorage.setItem('vuex',JSON.stringify(state))
	  }
  },