概念
Vuex 是一个专为vue.js应用程序开发的状态管理模式,说白了就是一个共享仓库
初始化
- 下载vuex
npm install vuex --save - 使用vuex 在
src目录下新建store文件夹,在其下新建store.js,store.js就是存放我们vuex的 - 在
store.js中引入vue和vuex,并使用vuex
使用state(默认值)
初始state
state 里存放的就是货物,我们初始数据都是放在这里的
引用state
新建一个vue文件
store.js,并注册使用,然后我们就可以通过$store.state.?来获取我们的初始数据,这时数据(状态)就可以展示出来了.
刚才那个获取数据太过繁杂,接下来我们可以使用下面几种方法来简化获取的方式.
- 通过计算属性返回某个值
- 通过
computed:mapState([])获取,想要使用mapState,需要先引入进来,然后通过computed:mapState(['名'])可以引入与state子节点名称相同的,[ - 通过对象展开运算符
...mapState(['名'])获取,当局部计算属性也需要混合使用时,
Mutation (同步)改变值###
Mutation就是改变货物,改变状态和值,相当于事件注册,同时改变store中状态的唯一方法就是通过commit提交mutation
基本使用
mutations:{},里面写改变的规则
payload
$store.commit可以传入额定的参数即mutation得载荷(payload)
- 直接传参数
- 传入对象
- 使用
...mapMutations在方法里调用...mapMutations,同样的要想使用需要先引入import { mapState ,mapMutations} from 'vuex',然后再使用,至于传参,只要遵守传参的定义就行
Action (异步)改变值
类似于mutation,不同的是Action提交的是mutation,而不是直接改状态,mutation像是事件注册,需要相应的触发条件,而Action就是管理触发条件的,
Action函数接收一个与store实例具有相同方法和属性的context对象,因此可以通过调用context.commit提交,通过context.state和context.getters来获取state和getters
使用
commit多次
触发
通过$store.dispatch('名')触发
异步
使用辅助函数...mapAcion(['名'])在组件中分发
getter
定义一组数据
