vuex的辅助函数 【vuex的进阶使用】

【掌握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))
	  }
  },