美文网首页
vue-cli + vuex

vue-cli + vuex

作者: 从不放弃 | 来源:发表于2017-10-11 17:29 被阅读42次

    官网地址

    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

    相关文章

      网友评论

          本文标题:vue-cli + vuex

          本文链接:https://www.haomeiwen.com/subject/awdwyxtx.html