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

luckyw 發布于2019-08-21 16:46 / 1601人閱讀

摘要：接收作為其第一個函數要改變狀態值只能通過提交來完成在里面注入引入新建文件，并新建路由指向組件參照的使用。當應用變得非常復雜時，對象就有可能變得相當臃腫。為了解決以上問題，允許我們將分割成模塊。

上兩篇講了：

環境的搭建用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萬活躍用戶

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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