vue（22）Vuex的安裝與使用

Silent丿丶黑羽發表於2021-07-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的值
       

相關文章