巧學vuex

"Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化"。這句話是截取vuex官網上對vuex介紹的一句話，對於不少新手朋友，剛接觸vuex的時候，確定被它這麼多的專業詞彙搞得一臉懵逼，不知所云。那麼做爲新手該如何學習vuex呢，個人建議就是「理解」，用通俗易懂的話和比喻來講明vuex是個幹啥的，是個什麼東西。

vuex

上面的前言，說了要用通俗易懂的話來介紹vuex，那麼該怎麼理解呢？個人理解就是，你把vuex當成一個項目頂層的全局對象來看待，有了這樣的認識，你在學習vuex確定會事半功倍的。

安裝vuex

首先咱們要安裝：

`

npm install vuex --save
複製代碼

`

其次就是建立vuex，建立這一塊建議你們按照官方的文檔命名來，這樣作的目的嗎，顯而易見，你們都知道開發當中有一些潛在的規範，遵照這些規範就是爲了讓你們好理解，我這裏是幹嗎的。在這裏我就建議你們在項目裏單首創建一個store的文件夾，並在裏面建立一個index.js的文件吧，而後在index.js裏引入vuex:

`

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);

// 這個是store文件夾下的index.js文件
export default new Vuex.Store({ // 導出這個對象
    state: {
        
    },
    getters: {

    },
    mutations: {
        
    },
    actions: {
        
    }
})
複製代碼

`

最後在main.js的文件裏引入咱們剛建立的store文件夾裏的index.js文件：

`

import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store/index';  // 引入vuex

new Vue({
  el: '#app',
  router,
  store, // 注入vuex 
  components: { App },
  template: '<App/>'
})
複製代碼

`

到這一步，咱們的vuex就算是搭建完畢了,下面咱們就針對vuex裏的各個功能模塊進行探討,vuex下面有四個功能模塊state, getters, mutations, actions，也就是四個子對象。

State

前面咱們說了vuex其實就是一個全局對象，而這個對象呢包含有四個子對象，子對象一：state，state是幹嗎的呢？，state就是這個全局對象專門用來存儲數據的地方，也就是公共的數據源：

`

export default new Vuex.Store({ 
    state: { // 這裏是存儲數據的地方，公共的數據源
        animals: [{num: 1, animal: '老虎'}, {num: 2, animal: '獅子'},
        {num: 3, animal: '大象'}]
    }
})
複製代碼

`

那麼如何使用這個數據呢？使用很簡單，直接在vue裏的computed對象裏書寫便可：

`

// 組建裏調用
<template>
    <div>
        <ul>
            <li v-for="(item,index) in animals" :key="index">
                <label>{{item.num}}</label>
                <span>{{item.animal}}</span>
            </li>
        </ul>
    </div>
</template>

// ...其餘代碼省略
computed: {
    animals () {
            return this.$store.state.animals;
        }
}
複製代碼

`

注意：this.$store就是咱們整個vuex實例，也就是咱們說的那個全局對象,state就是存儲公共數據的容器。 這樣咱們就成功的使用到了vuex state裏的數據了。

Getter

子對象二：getter，它的功能和做用就相似於vue裏的computed,也就是說vuex裏的計算屬性，vue裏的computed是用來對數據進行額外操做的，vuex裏的getter也是同樣的：

`

export default new Vuex.Store({ 
    state: { // 這裏是存儲數據的地方，公共的數據源
        animals: [{num: 1, animal: '老虎'}, {num: 2, animal: '獅子'},
        {num: 3, animal: '大象'}] 
    },
    getter: {
        filterAnimal: state => {    // 這是個方法
            return state.animals.filter(item => {
                return item.num > 1
            })
        }
    }
})
複製代碼

`

注意：getter裏面filterAnimal是個方法，方法名字隨你本身定義，state這個參數就是vuex存儲數據裏的state,getter裏全部的方法都默認傳入了該參數。 使用也是直接在vue裏的computed對象裏書寫：

`

// 組建裏調用
<template>
    <div>
        <ul>
            <li v-for="(item,index) in filterAnimal" :key="index">
                <label>{{item.num}}</label>
                <span>{{item.animal}}</span>
            </li>
        </ul>
    </div>
</template>

// ...其餘代碼省略
computed: {
    filterAnimal () {
            return this.$store.getters.filterAnimal;
        }
}
複製代碼

`

Mutations

子對象三：mutations，官網裏是這樣介紹的：「更改 Vuex 的 store 中的狀態的 惟一 方法是提交 mutation」，在這段話裏面請你們注意那個「惟一」。這也就是說，對vuexstate裏面的數據，你要想進行修改，必須經過mutations方式才能夠，只有mutations這個對象裏的方法才能夠修改state裏的數據，也就是狀態：

`

export default new Vuex.Store({ 
    state: { // 這裏是存儲數據的地方，公共的數據源
        animals: [{num: 1, animal: '老虎'}, {num: 2, animal: '獅子'},
        {num: 3, animal: '大象'}] 
    },
    mutations: {
        addAnimal (state, params) { // params是來自你調用這個方法時傳入的參數
            state.animals.push(params)
        }
    }
})
複製代碼

`

注意：mutations裏定義的方法能夠接收兩個參數，state就是數據對象，params就是調用時傳遞過來的數據

組建裏調用mutations裏的方法，使用this.$store.commit()觸發，參數一是你要觸發的mutations裏的哪一個方法，參數二就是你要傳遞過去的數據： `

// 組建裏調用
<template>
    <div>
        <button @click="addAnimal()">增長動物</button>
        <ul>
            <li v-for="(item,index) in filterAnimal" :key="index">
                <label>{{item.num}}</label>
                <span>{{item.animal}}</span>
            </li>
        </ul>
    </div>
</template>

// ...其餘代碼省略
methods: {
    addAnimal () {
            let animal = {num: 4, animal: '熊貓'}
            this.$store.commit('addAnimal', animal);
        }
}
複製代碼

`

mutations操做注意事項：mutations屬於同步操做，因此你在操做時請記得提早聲明好你要操做的數據，也就是state裏的數據。

Actions

子對象四：actions相似於mutations，actions的不一樣點有兩點：

• action 提交的是 mutation，而不是直接變動狀態;
• action 能夠包含任意異步操做;

你們請記住上面這兩點，上面介紹mutations時說過，要想改變state裏面的數據，惟一的方法就是經過mutations,因此action這裏也是經過mutation: `

export default new Vuex.Store({ 
    state: { // 這裏是存儲數據的地方，公共的數據源
        animals: [] 
    },
    mutations: {
        initAnimal (state, params) { // 初始化state裏animals數據
            state.animals = params;
        }
    },
    actions: {
        initAnimals (context) {
            return new Promise((resolve, reject) => {
                let animals = [{num: 1, animal: '老虎'}, {num: 2, animal: '獅子'},
                              {num: 3, animal: '大象'}]
                context.commit('initAnimal', animals);  //調用mutations裏的方法
                resolve(animals);
            })
        }
    }
})
複製代碼

`

組建裏面調用，使用vuex裏的this.$store.dispatch()方法執行，上面例子中的Promise並無實際意義，只是爲了演示特地寫出來的，你方法體裏直接寫context.commit()也是能夠的：

`

// 組建裏調用
// ...其餘代碼省略
created() {
    this.$store.dispatch('initAnimals');
}
複製代碼

` 在本示例中，調用是在組建生命週期鉤子函數裏調用，具體在什麼地方調用，根據實際的業務需求去實現便可。

mapState、mapGetters、mapActions

mapState、mapGetters、mapActions這三個是vuex裏簡化調用而提供的方法，你若是須要使用，須要在你使用的組建單獨引入這三個方法：

`

// 組建裏調用
<template>
    <div>
        <ul>
            <li v-for="(item,index) in animals" :key="index">
                <label>{{item.num}}</label>
                <span>{{item.animal}}</span>
            </li>
        </ul>
    </div>
</template>

// ...其餘代碼省略
import {mapState, mapGetters, mapActions} from 'vuex';

computed: {
    // 使用擴展運算符
    ...mapState({
        animals:state => state.animals
    }),
}
複製代碼

`

這裏暫且只示例mapState了，其餘留給你們本身嘗試，稍微說明應用的地方，mapGetters通常也是在computed裏調用，mapActions通常是在methods的方法裏調用。

Module

看完上面的內容，其實你們已經會使用vuex了，那麼這個Module是幹嗎的呢，上面咱們說過，vuex是老頂層的全局對象，若是全部的數據狀態若是都寫在這個index的文件裏面，代碼體會愈來愈大，因此，vuex容許咱們把store分割成各自獨立的模塊，每一個獨立模塊都有本身的state, getters, mutations, actions,注意哦，分割出去的各個模塊，他們的state裏的數據都是獨立，各自是各自的。:

`

import Vue from 'vue';
import Vuex from 'vuex';
import module1 from './modules/module1';
import module2 from './modules/module2';

// 這個是vuex的主模塊，也就是index.js這個文件
export default new Vuex.Store({
state,
mutations,
actions,
modules: {
    module1,
    module2
}
複製代碼

}) `

獨立出去的模塊使用import引入進來，在主模塊裏在modules裏注入便可。

總結

在本篇文章的思路里，是以全局對象的思惟方式來學習vuex，其目的也是爲了讓你們更快速的理解和認識vuex，那麼vuex是否就是全局對象呢，在vuex的官方文檔裏就已經給出了答案和解釋：

• Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。
• 你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。這樣使得咱們能夠方便地跟蹤每個狀態的變化，從而讓咱們可以實現一些工具幫助咱們更好地瞭解咱們的應用。

vuex的主要應用就是對多組建或者多頁面使用同一個數據源，也就是說共用同一個數據，當咱們在某一個組建改變這個數據的某一個狀態或者值時，相應的也讓其餘組建和頁面發生相同的變化。 最後也把vuex官網的連接貼在這裏，你們看完後能夠在去官網查看實際API。