vue-cli + vuex

官网地址

https://vuex.vuejs.org/zh-cn/

准备工作：

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内使用，页面调用触发

项目代码有详细解释，在此是把大体思路捋一遍

https://github.com/DINLiang/vue-demo