大前端之路-vuex 速覽

vuex 是什麼？能夠解決什麼問題？

我的理解 就是單頁應用中 多個組件之間 共享數據的 狀態機通用管理機制。有點相似於java中的觀察者模式，在android中相似的有eventbus。中大型應用應該都會用到。

若是你跟我同樣是有移動開發經驗的前端新人，那麼最好仍是學習一下這個東西，之後遇到相似問題就能夠直接哪來用了。

固然了，不要濫用vuex，能用參數傳遞的，仍是儘可能參數傳遞

快速在單頁應用中共享數據

好比說 咱們先在compa 中 對一個數據 進行加操做，而後再另一個comb中 就能夠拿到 加加之後的值。 聽起來有一點像java中的單例。 在vuex 中 咱們來實現一下

首先，咱們來看下簡單的目錄結構：

而後看下store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

//要共享的數據
const state = {
    count: 1
}

//對共享數據的操做
const mutations = {
    add(state) {
        state.count++
    },
    reduce(state) {
        state.count--
    }

}

//把這個狀態 暴露出去 也就是 數據 和對應數據的操做
export default new Vuex.Store({
    state, mutations
})
複製代碼

看看咱們的Count.vue 怎麼對 共享數據進行操做

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr>
        <h3>{{$store.state.count}}</h3>

        <p>
            <button v-on:click="$store.commit('add')">+</button>
            <button v-on:click="$store.commit('reduce')">-</button>

        </p>
    </div>

</template>

<script>
import store from "@/vuex/store";

export default {
  data() {
    return {
        msg:'hello vuex'
    };
  },
  store
};
</script>


複製代碼

注意這裏點擊事件的寫法。

最後看看觀察者，其實觀察者沒啥好說的，最好寫了。

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr>
        <h3>{{$store.state.count}}</h3>

    </div>

</template>

<script>
import store from "@/vuex/store";

export default {
  data() {
    return {
        msg:'hello vuex 觀察者'
    };
  },
  store
};
</script>


複製代碼

至此，咱們就能夠完成 在count頁面中操做數據 可是其餘頁面也能夠接收到數據的變化通知 這個功能了。

vuex中 如何簡潔的獲取狀態對象的值

state 其實就是狀態對象，mutations 就是對狀態對象操做的方法。

來看看上面的例子的缺陷：

換種寫法：

再換一種：

再來一種最簡單的方法：

vuex 狀態管理器

先來看一下 若是咱們對狀態對象的操做方法裏面 要傳遞參數 應該怎麼作

先定義一下這個函數：

而後看一下 咱們怎麼調用他

<button v-on:click="$store.commit('addN',5)">一次性加5</button>

複製代碼

最後看看咱們調用方法的簡寫 應該怎麼寫

vuex 中的計算屬性 getters

這個地方其實就是一個過濾器的做用，舉個例子，咱們有一組銷售的數據。 可是我取的時候 我想取最近100天銷售的數據 那我確定要對源數據處理之後生成新的數據（不修改源數據的狀況下） 再返回。

舉個例子

定義getters

使用它

最後看一下效果

最後提一下，對於java技術棧的同窗來講，必定不要在 任何屬性裏的get方法中加入特殊的邏輯

action 異步修改狀態

前面提到的mutation也能夠修改狀態，只不過他是同步的，而action是異步的。

//通常而言 咱們能夠在actions對象中 處理一些要異步處理的操做
const actions = {
    //上下文對象 
    addAction(context) {
        context.commit('add', 10)
        setTimeout(() => {
            context.commit('reduce')
        }, 5000)
    },
    reduceAction({ commit }) {
        commit('reduce')
    }
}
複製代碼

而後看一下調用方：

module 模塊組 ---大項目專用

我的以爲 這個module 只有大型項目會用，通常小團隊用這個反而增長複雜度。這裏就知道有這麼個東西便可。 講白了這個東西仍是偏向工程性質的多一點，而不是功能性的。 適用於大項目 進行模塊化開發的。

定義module

使用module

想要簡寫方法也能夠

若是你對module 感興趣，能夠參閱module官方文檔