1 什么是 vuex 能解决什么问题
vuex 是 vue 的状态管理工具,能解决组件之间数据共享的问题
2 五大核心以及怎么调用
state 存放数据的地方 this.$store.state.xxx
mutations 修改state的地方 this.$store.commit()
getters 计算 state 的地方 this.$store.getters.xxx
actions 发送异步请求的地方 this.$store.dispatch()
modules 模块化 把数据分模块管理
3 vuex 的语法糖辅助函数
mapState mapMutations mapActions mapGetters
先引入 然后展开使用 mapState 和 mapGetters 在计算属性下展开 mapActions 和 mapMutations 在 methods 下展开 展开的时候用扩展运算符...展开
4 vuex 的执行机制
如果要修改 state,先通过 dispatch 调用一个 action 再在 action 里通过 commit 调用一个 mutations 修改 state
5 vuex 的弊端
⽐如浏览器刷新的时候,vuex 的数据会丢失,我们⼀般结合本地存储来解决,当我们在 mutations ⾥⾯改变 state 的时候在通过 localStorage 或者 sessionStorage 或者持久化插件存储到本地,然后在 state 的状态的属性值那块写⼀个三元表达式,如果本地存 在数据的话则读取本地存储的数据,否则就赋值为 null 具体存了本地存储怎么拿来用:
在state中; // list:JSON.parse(localStorage.getItem("list"))||[], list: localStorage.getItem("list") ? JSON.parse(localStorage.getItem("list")) : [];
6 怎么开启严格模式
跟 state 同级的地方 设置 strict: false, 如果开启了严格模式 只能在 mutations 中修改 state 否则就会报错
7 modules
当在 vuex 中存储的数据很多的时候 需要用 modules 来分模块管理 首先新建一个模块的 js 文件 里面有四大核心 state mutations actions getters 并且要开启一个命名空间 namespaced:true 然后在 index.js 中引入 这个 js 并在 modules 中注册模块 用的时候 this.$store.state.a.arr 这就是调用模块a下面的arr this.$store.commit("a/add") 这个就是调用模块 a 下面的 add 方法