1.vuex是什么?
简而言之vuex就是一种
状态管理模式
。
2.又为什么要使用这种管理呢?
是为了集中管理所有组件的状态,保证状态可预测的发生变化。
简单的数据不要用vuex,复杂的数据才用
3.vue的工作流程
:
vue 组件 -> Dispatch 派发 -> action -> commit 提交 -> mutation -> change 修改 -> state -> render 渲染 -> vue组件
4.使用流程:
(1)先在state
放
初始
数据
,想要
修改
state里边存放的数据,
不能直接修改state
,首先得在actions(它是方法)->mutations->state里边修改
state: {
count:0 // 初始数据
}
(2)actions:里边的方法自带一个{commit}—记住,直接那样写就可以
这里边的行为
不做处理
,只提交给mutations
e.g:
actions: {
add ({commit}) {
commit(‘mutations里边的函数方法一致’)
}
}
(3) mutations:也是方法,里边的函数名
必须
跟actions里边提交的名字要相同,内部自带一个参数,state,方便去改变下属的属性
e.g:
mutations: {
actions里边提交的名字一致 (state) {
state.count++
}
}
(4)还会添加一个:
getters
,为了更安全,其中方法名,需要和state里边初始化数据名一致(切记记住,其实也没啥用,但是需要这样写,就是体验感更好),它相当于一个
计算属性
getters: {
count(state) {
return state.count // 返回count的值
}
}
(5)想要在哪儿使用vuex,就在哪儿引用它,
获取数据:引用:
import { mapGetters } from ‘vuex’
花括号里边想要获取哪个就引用哪个
又怎么用呢?或括号内部引用的值
它相当于一个计算属性,下边这样定义:
computed:mapGetters([count])
如果要引用
多个
,就要使用
…
,es6新语法,比如:
computed:{
…mapGetters([count])
}