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

上兩篇講了：

環境的搭建用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文件：

<template>
    <div>
        <div>{{$store.state.count}}</div>
        <div>
        <span @click="increment">increment</span>
        <span @click="decrement">decrement</span>
        </div>
    </div>
    </template>
    <style>
    </style>
    <script>
    export default {
        data(){
            return {};
        },
        methods:{
            increment(){
                this.$store.commit('increment')  
            },
            decrement(){
                this.$store.commit('decrement')  
            }
        }
    }
    </script>

效果圖：

---

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