vue（22）Vuex的安裝與使用

• 2021 年 7 月 24 日
• 筆記
• VUE

前言

每一個 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的值