什么是Vuex, vuex 能解决什么问题!

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值