Vue.js 系列教程 4：Vuex

標籤：imp   設計   trick   應用程式   .com   設定   block   數字   訪問   

原文：intro-to-vue-4-vuex

譯者：nzbin

這是關於 JavaScript 架構 Vue.js 五個教程的第四部分。在這一部分，我們會學習使用 Vuex 進行狀態管理。這個系列教程並不是一個完整的使用者手冊，而是通過基礎知識讓你快速瞭解 Vuejs 以及它的用途。

系列文章:

1. 渲染, 指令, 事件
2. 組件, Props, Slots
3. Vue-cli
4. Vuex (你在這!)
5. Animations

Vuex

如果你錯過了關於組件及 Vue-cli 的部分，在閱讀本篇文章之前應該先讀讀這幾部分。現在我們已經瞭解了關於組件、傳遞狀態和 props 的基本知識，接下來討論一下 Vuex，它是狀態管理的好工具。

之前，我們是從頂層組件向下傳遞狀態，而同胞組件之間並沒有分享資料。如果它們需要相互連信，我們要在應用程式中推送狀態。這是可以的！但是一旦你的程式變得複雜，這種方法就沒有意義了。如果你之前用過 Redux，那 Vuex 中所有的概念及實現對你也不陌生。Vuex 是 Vue 中的 Redux。實際上，Redux 也可以用於 Vue，但是，使用專門為 Vue 設計的工具 Vuex 更加有利。

首先，安裝 Vuex:

npm install vuex

或者

yarn add vuex

我這樣設定： 在 `/src` 目錄下，我建立了名為 store 的目錄 ( 這是一種選擇，你也可以在同級目錄建立一個 `store.js` 檔案 )，再在其中建立一個名為 `store.js`的檔案。`store.js` 中的初始設定如下 ( vstore sublime snippet )：

import Vue from ‘vue‘;import Vuex from ‘vuex‘;Vue.use(Vuex);export const store = new Vuex.Store({  state: {    key: value  }});

key: value 是狀態資料的預留位置。在其他例子中，我們已經使用 counter: 0 。

在 `main.js` 檔案中，我們將執行以下更新（加粗顯示更新的行）：

import Vue from ‘vue‘;import App from ‘./App.vue‘;import { store } from ‘./store/store‘;new Vue({  el: ‘#app‘,  store: store,  template: ‘<App/>‘,  components: { App }});

更新之後，和之前做的組件一樣，我們可以把 data() 作為狀態，然後我們通過以下三種方式使用或者更新狀態：

• Getters 可以在模板中靜態顯示資料。換句話說，getters 可以讀取資料，但不能改變狀態。
• Mutations 允許更新狀態，但永遠是同步的。Mutations 是 store 中改變狀態資料的唯一方式。
• Actions 允許非同步更新狀態，但是需要使用一個已經存在的 mutation 。如果你需要以特定的順序同時執行不同的 mutations 會非常有用。

如果你以前沒有接觸過，也許很難理解為什麼會使用非同步狀態的變化，所以先看看理論上它會發生什麼，然後再開始下一部分。假如你運行 Tumblr。如果頁面中有大量長時間啟動並執行 gif 圖片。你只想每次載入其中一部分，比如當使用者將頁面滾動到底部 200px 時，載入 20 個圖片。

你需要使用 mutation 展示後面的 20 個。但是現在還沒有後面的 20 個，你不知道何時到達頁面底部。因此，在程式中，建立一個事件來監聽滾動的位置然後觸發相應的操作。

然後，該操作將從資料庫中檢索後面 20 個映像的 URL，並將 20 個圖片的狀態添加到 mutation 中然後顯示。

本質上，Actions 建立一個請求資料的架構。它們使用一致的方法來應用非同步方式中的資料。

最基本的抽象例子

在下面的例子中，展示了每個屬性最基本的實現方式，因此你可以瞭解如何設定及使用。載荷是選擇性參數，可以通過它定義正在更新的組件的數值。不用擔心，我們隨後將示範一個實際案例，現在最重要的是瞭解基本概念。

`store.js`：

export const store = new Vuex.Store({  state: {    counter: 0  },  // 展示內容, 無法改變狀態  getters: {    tripleCounter: state => {      return state.counter * 3;    }  },  // 改變狀態  //mutations 永遠是同步的  mutations: {    // 顯示傳遞的載荷 payload, 用 num 表示    increment: (state, num) => {      state.counter += num;    }  },   // 提交 mutation, 這是非同步  actions: {    // 顯示傳遞的載荷 payload, 用 asynchNum ( 一個對象 )表示    asyncDecrement: ({ commit }, asyncNum) => {      setTimeout(() => {        // asyncNum 對象可以是靜態值        commit(‘decrement‘, asyncNum.by);      }, asyncNum.duration);    }  }});

一個很好的功能是我們可以在 mutations 中返回整個狀態物件，但是不必這樣做，我們只使用我們需要的。時間穿梭測試（進入 mutations 中尋找錯誤）仍然可以工作。

在組件中，我們將對 getters 使用 computed （這很重要，因為 value 值已經計算好了），在 methods 中使用 dispatch 來訪問 mutations 和 actions：

`app.vue`：

computed: {  value() {    return this.$store.getters.value;  }},methods: {  increment() {    this.$store.dispatch(‘increment‘, 2)  }}

或者，您可以使用擴充運算子。我發現如果需要大量 mutations/actions 的時候是非常有用的:

export default {  // ...  methods: {    ...mapActions([      ‘increment‘, // 將 this.increment() 映射到 this.$store.commit(‘increment‘)      ‘decrement‘,      ‘asyncIncrement‘    ])  }}

簡單的執行個體

讓我們再看一看天氣通知的程式, 在它的 Vuex store 中有少量且簡單的狀態。這是範例程式碼的倉庫.

 

`store.js`:

import Vue from ‘vue‘;import Vuex from ‘vuex‘;Vue.use(Vuex);export const store = new Vuex.Store({  state: {    showWeather: false,    template: 0  },    mutations: {      toggle: state => state.showWeather = !state.showWeather,      updateTemplate: (state) => {        state.showWeather = !state.showWeather;        state.template = (state.template + 1) % 4;      }  }});

我們在這裡設定了 showWeather 的狀態，它的初始值為 false ，因為我們不希望任何動畫立即執行，只有當使用者點擊按鈕時才會執行。在 mutations 中，我們可以切換 showWeather 的狀態。

我們也將狀態中的 template 設定為 0 。我們會在每個天氣組件中迴圈使用這個數字。所以在 mutations 中，我們建立了一個名為 updateTemplate 的方法。它會同時切換 showWeather 的狀態並且更新 template 加 1 後的數值，但是值為 4 時再點擊會變成 0 。

App.vue：

<template>  <div id="app">    ...    <g id="phonebutton" @click="updateTemplate" v-if="!showWeather">       ...    </g>    <transition         @leave="leaveDroparea"        :css="false">      <g v-if="showWeather">        <app-droparea v-if="template === 1"></app-droparea>        <app-windarea v-else-if="template === 2"></app-windarea>        <app-rainbowarea v-else-if="template === 3"></app-rainbowarea>        <app-tornadoarea v-else></app-tornadoarea>      </g>    </transition>    ...  </div></template>

<script>  import Dialog from ‘./components/Dialog.vue‘;  ...  export default {    computed: {      showWeather() {        return this.$store.state.showWeather;      },      template() {        return this.$store.state.template;      }    },    methods: {      updateTemplate() {        this.$store.commit(‘updateTemplate‘);      }    },    ...    components: {      appDialog: Dialog,      ...    }}</script>

`dialog.vue`:

<script>export default {  computed: {    template() {      return this.$store.state.template;    }  },  methods: {    toggle() {      this.$store.commit(‘toggle‘);    }  },  mounted () {      //enter weather      const tl = new TimelineMax();    ...  }}</script>

在上面的代碼中，App 組件使用了 showWeather 依次展示模板, 而 Dialog 組件只切換組件的可見度。在 App.vue 中，我們根據 App <template> 中的模板數值，通過第一章學過的的條件渲染來展示以及隱藏不同的子組件。在 App 中， 我們通過 computed 數值監聽 store 中狀態的變化，使用 methods 中的 toggle() 和 updateTemplate() 提交 store 的 mutations 。

這是一個基本樣本，但是你可以瞭解如何處理有大量狀態的複雜程式，這有利於在在一個地方管理所有的狀態，而不是上下移動組件。尤其當同胞組件之間通訊的時候。

如果你想深入瞭解 Vuex ， 可以看這篇 文檔 。你肯能注意到我們在最後一個例子中使用了 <transition> 組件，還有大量動畫。我們會在下一部分展開討論。

Vue.js 系列教程 4：Vuex