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 触发 actionsactions 调用 mutationsmutations 通过 getters获取数据并修改 statestate 响应到页面(components)

mapGetters与mapActions

a、四大核心都是注册在vuex上的,可以有自己的命名空间
b、页面使用直接引入vuex即可,使用mapGetters,mapActions调用

c、mapGetters:获取数据,在computed内使用,自动计算响应
d、mapActions:获取方法,在methods内使用,页面调用触发

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,964评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,040评论 4 111
  • vuex是什么鬼? 如果你用过redux就能很快的理解vuex是个什么鬼东西了。他是vuejs用来管理状态的插件。...
    麦子_FE阅读 6,903评论 3 37
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,153评论 0 6
  • 系列文章:Vue 2.0 升(cai)级(keng)之旅Vuex — The core of Vue applic...
    6ed7563919d4阅读 4,588评论 2 58