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