快捷導(dǎo)航

說(shuō)說(shuō)如何使用Vuex進(jìn)行狀態(tài)管理(小結(jié))

更新時(shí)間：2019年04月14日 09:43:50 作者：deniro

這篇文章主要介紹了說(shuō)說(shuō)如何使用Vuex進(jìn)行狀態(tài)管理(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1 為什么需要狀態(tài)管理

一個(gè) Vue 組件分為數(shù)據(jù)（model）與視圖（view）。當(dāng)通過(guò) methods 中的方法更新數(shù)據(jù)時(shí)，視圖也會(huì)自動(dòng)更新。

message.vue

<template>
  <div>
    {{message}}
    <button @click="changeMessage">改變內(nèi)容</button>
  </div>
</template>

<script>
  export default {
    name: "message",
    data() {
      return {
        message: '你好'
      };
    },
    methods: {
      changeMessage() {
        this.message = '我很好'
      }
    }
  }
</script>

效果：

這個(gè)示例中的 message 與 changeMessage() 只能在 message.vue 組件中使用。而在實(shí)際應(yīng)用中，常見的就是跨組件共享數(shù)據(jù)的要求。這時(shí)，就可以通過(guò) Vuex 來(lái)優(yōu)雅并高效地管理組件狀態(tài)啦O(∩_∩)O~

注意：Vuex 有一定的技術(shù)門檻，它主要應(yīng)用于多人協(xié)同開發(fā)的大型單頁(yè)面應(yīng)用。所以，是否使用 Vuex 取決于團(tuán)隊(duì)規(guī)模與技術(shù)儲(chǔ)備。

2 安裝 Vuex

npm install --save vuex

安裝版本：vuex@3.1.0

3 基本用法

3.1 引入 Vuex

在 main.js 中引入 Vuex：

...
//引入 vuex 插件
import Vuex from 'vuex';
...

//加載 vuex 插件
Vue.use(Vuex);

//Vuex 配置
const store = new Vuex.Store({
  state: {
    ...
  },
  mutations: {
    ...
  }
});
...

new Vue({
  el: '#app',
 ...
  //使用 Vuex
  store: store,
 ...
})

Vuex 中的 store 包含應(yīng)用的數(shù)據(jù)狀態(tài)和操作過(guò)程。store 中的數(shù)據(jù)發(fā)生變化，使用了這些數(shù)據(jù)的組件也會(huì)立即更新。

3.2 定義數(shù)據(jù)

數(shù)據(jù)定義在 Vuex 的 states 屬性中。

我們以計(jì)數(shù)器為例。定義了一個(gè) count 數(shù)據(jù)并初始化為 0：

const store = new Vuex.Store({
  state: {
    count: 0
  }
});

3.3 讀取數(shù)據(jù)

數(shù)據(jù)定義好之后，就可以在 vue 組件中通過(guò) $store.state.count 讀取出來(lái)啦，比如在 index.vue 中可以這樣寫：

<template>

  <div>
    ...
    {{count}}
   ...
  </div>
</template>

<script>
  export default {
    name: "index.vue",
    computed: {
      count() {
        return this.$store.state.count;
      }
    },
 
   ...
 }
</script>

這里利用計(jì)算屬性，從 Vuex 的 store 中讀取了計(jì)數(shù)器的當(dāng)前值。

3.4 修改數(shù)據(jù)

使用 Vuex 的 mutations 屬性，可以修改 state 中定義的數(shù)據(jù)。我們?yōu)橛?jì)數(shù)器定義增長(zhǎng)與減少操作：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, n = 1) {
      state.count += n;
    },
    decrease(state) {
      state.count--;
    }
  }
});

mutations 中的函數(shù)，可以有兩個(gè)入?yún)?。第一個(gè)入?yún)⑹?state，第二個(gè)入?yún)⒖梢允侨我忸愋?。比如這里可以為新增操作，指定增長(zhǎng)量，如果不指定，那么增長(zhǎng)量就默認(rèn)為 1。

注意：如果需要傳入多個(gè)參數(shù)，那么我們可以在此傳入一個(gè)帶多個(gè)參數(shù)的對(duì)象。

這里使用了 ES 6 為函數(shù)設(shè)置默認(rèn)值的語(yǔ)法。 increment(state, n = 1) 等同于：

increment (state, n){
 n = n || 1;
}

在 *.vue 組件中，可以通過(guò) this.$store.commit 方法來(lái)執(zhí)行 mutations。我們?cè)?index.vue 中，新增三個(gè)按鈕，用于 “+1” 、“-1” 和 "+3" 操作：

<template>

  <div>
 
    {{count}}
    <button @click="handleIncrement">+1</button>
    <button @click="handleDecrease">-1</button>
    <button @click="handleIncrementMore">+3</button>
  </div>
</template>

<script>
  export default {
    ...
    methods: {
      handleIncrement() {
        this.$store.commit('increment');
      },
      handleDecrease() {
        this.$store.commit('decrease');
      },
      handleIncrementMore() {
        this.$store.commit('increment', 3);
      }
     }
   }
</script>

this.$store.commit 方法的入?yún)ⅲ窃?mutations 中定義的函數(shù)名。

還可以通過(guò)指定 type 的方式提交, type 的值就是 mutations 中定義的函數(shù)名：

main.js

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    ...
    incrementByParam(state, params) {
      state.count += params.count;
    }
  }
});

index.vue

<template>

  <div>
    {{count}}
    ...
    <button @click="handleByParam">+30</button>
  </div>
</template>

<script>
  export default {
    ...
    methods: {
      ...
      handleByParam() {
        this.$store.commit({
          type: 'incrementByParam',
          count: 30
        });
      },
    }
  }
</script>

注意：如果在 mutations 中異步操作了數(shù)據(jù)，那么組件在 commit 提交之后，將無(wú)法立即改變數(shù)據(jù)。所以，在 mutations 中，建議盡量使用同步方法來(lái)操作數(shù)據(jù)。

效果：