說說如何使用Vuex進行狀態(tài)管理(小結)

發(fā)布時間：2020-10-05 09:47:53 來源：腳本之家閱讀：163 作者：deniro 欄目：web開發(fā)

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

一個 Vue 組件分為數據（model）與視圖（view）。當通過 methods 中的方法更新數據時，視圖也會自動更新。

message.vue

<template>
  <div>
    {{message}}
    <button @click="changeMessage">改變內容</button>
  </div>
</template>

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

效果：

說說如何使用Vuex進行狀態(tài)管理(小結)

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

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

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 包含應用的數據狀態(tài)和操作過程。store 中的數據發(fā)生變化，使用了這些數據的組件也會立即更新。

3.2 定義數據

數據定義在 Vuex 的 states 屬性中。

我們以計數器為例。定義了一個 count 數據并初始化為 0：

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

3.3 讀取數據

數據定義好之后，就可以在 vue 組件中通過 $store.state.count 讀取出來啦，比如在 index.vue 中可以這樣寫：

<template>

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

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

這里利用計算屬性，從 Vuex 的 store 中讀取了計數器的當前值。

3.4 修改數據

使用 Vuex 的 mutations 屬性，可以修改 state 中定義的數據。我們?yōu)橛嫈灯鞫x增長與減少操作：

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

mutations 中的函數，可以有兩個入參。第一個入參是 state，第二個入參可以是任意類型。比如這里可以為新增操作，指定增長量，如果不指定，那么增長量就默認為 1。

注意：如果需要傳入多個參數，那么我們可以在此傳入一個帶多個參數的對象。

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

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

在 *.vue 組件中，可以通過 this.$store.commit 方法來執(zhí)行 mutations。我們在 index.vue 中，新增三個按鈕，用于 “+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 方法的入參，是在 mutations 中定義的函數名。

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

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 中異步操作了數據，那么組件在 commit 提交之后，將無法立即改變數據。所以，在 mutations 中，建議盡量使用同步方法來操作數據。

效果：

說說如何使用Vuex進行狀態(tài)管理(小結)

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

說說如何使用Vuex進行狀態(tài)管理(小結)

猜你喜歡

最新資訊

相關推薦

相關標簽