Vue2从0到1(三)：Vuex的使用

luckyw 发布于2019-08-21 16:46 / 1607人阅读

摘要：接收作为其第一个函数要改变状态值只能通过提交来完成在里面注入引入新建文件，并新建路由指向组件参照的使用。当应用变得非常复杂时，对象就有可能变得相当臃肿。为了解决以上问题，允许我们将分割成模块。

上两篇讲了：

环境的搭建用webpack打包vue 和Vue-router的使用

下面讲一下：

9.vuex的应用

安装vuex

npm install vuex --save

9.1基本用法：

新建store.js文件：

        import Vue from "vue";
        import Vuex from "vuex";

        Vue.use(Vuex)
        //创建Store实例
        const store = new Vuex.Store({
            // 存储状态值
            state: {
                count:1
        },
            // 状态值的改变方法,操作状态值
            // 提交mutations是更改Vuex状态的唯一方法
            mutations: {
                increment(state){
                    state.count++;
                },
                decrement(state){
                    state.count--;
                }
        },
            // 在store中定义getters（可以认为是store的计算属性）。Getters接收state作为其第一个函数
            getters: {
                
        },
            actions: {
                
        }
        })
        // 要改变状态值只能通过提交mutations来完成
        export default store;

在main.js里面注入store;

    ...
    //引入store
    import store from "./store.js"
    ...
    const app = new Vue({
        router,
        store
    }).$mount("#main")

新建count.vue文件，并新建路由指向count组件参照vue-router的使用。
count.vue文件：

效果图：

9.2用Module拆分state

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter

新建moduleA.js,moduleB.js

moduleA moduleB

并修改store.js:

...
import moduleA from "./moduleA";
import moduleB from "./moduleB";
...
Vue.use(Vuex)
//创建Store实例
const store = new Vuex.Store({
    modules:{
        moduleA, moduleB //es6的写法，合并模块
    }
})
...

在组件里面想访问到state需要用到

    $store.state.moduleA.count
    $store.state.moduleB.Name

效果图：

mutations里面修改state的方法依然不变

下章将讲用nodejs+koa2搭建后台，提供数据，以及Vuex的异步操作 以上代码代码亲测可用，托管在github上面，欢迎star

GPU云服务器云服务器从0到1搭建视频通话系统从0开始到1千万用户 vue2.0 cdn 从1个想法到35万活跃用户

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88704.html

关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
vue2.0开发聊天程序（三）组件的通信

摘要：我在中写了这段代码在组件被创建时候将会执行此函数相当于进入页面的自执行使用方法监听属性并执行一个回调函数按道理在元素被创建的时候，会将监听到的值赋给并且打印。天地不仁以万物为刍狗，宇宙无义视众生如蝼蚁　　　　　　　　　　　　　　　　　　——萧鼎和我上一节列出了５个关键点，第一个路由已经解决了，接下来解决第二个问题：组件的通信问题一、组件的关系组件之间的关系无非就是两种父子关系...

ddongjian0000 2019-08-21 11:27 评论0 收藏0
前方来报，八月最新资讯--关于vue2&3的最佳文章推荐

摘要：哪吒别人的看法都是狗屁，你是谁只有你自己说了才算，这是爹教我的道理。哪吒去他个鸟命我命由我，不由天是魔是仙，我自己决定哪吒白白搭上一条人命，你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运，我不晓得。我只晓得，不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处查看github最新的Vue...

izhuhaodev 2019-08-26 10:44 评论0 收藏0