官网地址
准备工作:
a、main.js添加
import router from './store/index'
第 1 步
a、创建state.js、mutations.js、actions.js、getters.js、mutations-types.js以及modules目录(存放组件.js)
b、index.js内引入并挂接
第 2 步
code.js内使用vuex四大核心书写方法实现逻辑
第 3 步
Code.vue中引用vuex,并使用mapGetters,mapActions
概念解析
vuex主要逻辑:四大核心
state存储数据
getters获取数据
mutations修改数据(数据的修改只能通过mutation)
actions定义方法,触发mutations
执行流程:页面(
components
)通过dispatch
触发actions
,actions
调用mutations
,mutations
通过getters
获取数据并修改state
,state
响应到页面(components
)
mapGetters与mapActions
a、四大核心都是注册在vuex上的,可以有自己的命名空间
b、页面使用直接引入vuex即可,使用mapGetters,mapActions调用c、mapGetters:获取数据,在computed内使用,自动计算响应
d、mapActions:获取方法,在methods内使用,页面调用触发