前言

每一個 Vuex 應用的核心就是 store（倉庫）。store基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)。Vuex 和單純的全域性物件有以下兩點不同：

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

Vuex的安裝

安裝通過NPM命令：

npm install vuex --save

在一個模組化的打包系統中，您必須顯式地通過 Vue.use() 來安裝 Vuex：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

如果我們使用vue-cli建立專案並選擇配置了Vuex，那麼專案會自動給我們配置好這些

Vuex的簡單示例

安裝 Vuex 之後，我們需要在某個地方存放我們的Vuex程式碼

這裡我們先建立一個資料夾store，並且在其中建立一個index.js檔案，在檔案中寫入如下程式碼

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({

  state: {

    counter: 1000,

  },

  mutations: {

    increment(state) {

      state.counter++;

    },

    decrement(state) {

      state.counter--;

    },

  },

});

其次，我們讓所有的Vue元件都可以使用這個store物件，來到main.js檔案中，匯入store物件，並且放在new Vue中，這樣其他Vue元件中，我們就可以通過this.$store的方式，獲取到這個store物件

import Vue from "vue";

import App from "./App.vue";

import store from "./store";

new Vue({

  store,

  render: (h) => h(App),

}).$mount("#app");

然後在App.vue中寫入如下程式碼：

<template>

  <div id="app">

    <h2>{{ $store.state.counter }}</h2>

    <button @click="addMethod">+</button>

    <button @click="reduce">-</button>

  </div>

</template>

<script>

export default {

  name: "App",

  methods: {

    addMethod() {

      this.$store.commit("increment");

    },

    reduce() {

      this.$store.commit("decrement");

    },

  },

};

</script>

<style lang="scss"></style>

Vuex使用步驟總結

  • 1.提取一個公共的store物件，用於儲存多個元件中共享的狀態

  • 2.將store物件放置在new Vue物件中，這樣可以保證在所有的元件中都可以用到

  • 3.在其他元件中使用store物件中儲存的狀態即可

    • 通過this.$store.state屬性的方式來訪問狀態
    • 通過this.$store.commit("mutations中的方法")來修改狀態

  • 注意事項

    • 我們是通過提交mutations的方式，而非直接改變store.state.counter
    • 這是因為Vuex可以更明顯的追蹤狀態的變化，所以不要直接改變store.state.counter的值