8.6学习笔记（vuex）

章鱼妹爱前端
70 阅读1分钟

image.png 如图，如果用全局事件总线，这样才能实现对x数据的读取和修改 image.png 如果换做vuex

image.png

image.png

image.png 如果不发ajax请求，也允许跳过Actions这一步

image.png

  • 这三个都是对象
  • 这三个都得经过store的管理
  • dispatch和commit都在store身上 image.png 使用步骤

image.png 注意事项 在2022年2月7日，vue3成为了默认版本，vue3成为默认版本的同时，vuex也更新到了4版本，执行 npm i vuex ，安装的是vuex4，vuex的4版本，只能在vue3中使用，我们目前用的是vue2，所以要安装vuex3，输入npm i vuex@3

store的代码应该在vuex创建之后才能执行，要不然会出现如下的报错，vue脚手架解析的时候会先扫描一遍所有的代码，优先解析import，所以不管import的代码放在Vue.use(Vuex)前面还是后面都会出现这种报错，所以不能在main.js里面这样写 image.png

image.png

修改后的代码如下 （记得引入vue）

image.png

image.png 实现业务逻辑

image.png

image.png

image.png

四个map

image.png

getters

image.png

image.png

mapState

image.png

image.png 第一种写法 对象写法 image.png

第二种写法 数组写法

image.png

同理mapGetter也是这样

image.png

avatar
文章
阅读
粉丝