Vue学习(3)

文章目录

  • Vuex
    • 工作原理
    • 配置环境
    • 各种函数
      • mapState
        • 对象写法
        • 数组写法
      • MapGetter
      • MapMutations
        • 对象写法
        • 数组写法
      • Mapaction
      • 总结
    • 模块化
      • 模块化1
      • 总结

Vuex

Vue学习(3)_第1张图片

Vue学习(3)_第2张图片

工作原理

Vue学习(3)_第3张图片
那三个要通过store管理
Vue学习(3)_第4张图片
Vue学习(3)_第5张图片

配置环境

使用import时,回先执行Import中的代码,在后面的也会提前。
在这里插入图片描述
index.js
Vue学习(3)_第6张图片

main.js
Vue学习(3)_第7张图片
业务逻辑写在action中,mutation只写操作(加工)
没有业务逻辑,直接调用mutation
Vue学习(3)_第8张图片
Vue学习(3)_第9张图片
Vue学习(3)_第10张图片
action里面有可以有多个方法,处理多次逻辑。
Vue学习(3)_第11张图片
逻辑复杂并且想复用就用getter,别人想用

Vue学习(3)_第12张图片

各种函数

mapState

自动生成action这边的代码,只能生成带有$store.state中的数据

,导入

在这里插入图片描述

对象写法

…对象 的意思是将对象展开。
在这里插入图片描述

数组写法

生成的计算属性的方法和读取的数据的名字相同
在这里插入图片描述

MapGetter

Vue学习(3)_第13张图片

MapMutations

自动生成mutations这边的代码,要传入参数,有commit

对象写法

在这里插入图片描述

数组写法

函数名和调用的函数名是一样的

在这里插入图片描述

Mapaction

自动生成有dispatch的方法,也要接收参数

Vue学习(3)_第14张图片

总结

Vue学习(3)_第15张图片
Vue学习(3)_第16张图片

模块化

模块化1

将配置分开
Vue学习(3)_第17张图片
Vue学习(3)_第18张图片
要加上namespaced:true否则简写获取时会报错。
在这里插入图片描述

写了namespaced:true才能这样获取数据,否则就要报错,这是简写。
在这里插入图片描述
这也要多写一个参数
在这里插入图片描述

也可以加斜杠,分类后
在这里插入图片描述
getter内的
在这里插入图片描述
发送到actions

在这里插入图片描述
改进后

Vue学习(3)_第19张图片
Vue学习(3)_第20张图片
访问了一个访问api。
Vue学习(3)_第21张图片

总结

Vue学习(3)_第22张图片

Vue学习(3)_第23张图片
Vue学习(3)_第24张图片

你可能感兴趣的:(vue.js,学习,前端框架)