JavaScript >> Javascript 文檔 >  >> Tags >> APP

Vuex 指南 - Vue 應用程序的集中狀態管理

簡介

Vuex 是一個存儲的庫 Vuex 存儲中的數據 ,它充當 Vue 應用程序中狀態的數據源。該商店包含一個全局狀態 (一組屬性)和函數吸氣劑 , 動作變異 ) 用於讀取和更改狀態。

考慮一個場景,您想要創建一個簡單的 Vue 應用程序,讓您可以從變量中添加或刪除值,count ,如下圖所示:

正常的過程是——首先,定義一個返回我們的 count 的函數 變量:

data() {
   return {
     count: 0
  }
}

然後定義一個遞增和遞減函數,以便我們可以操作 count

methods: {
  increment() {
    this.count++;
  },
  decrement() {
    this.count--;
  }
}

您可以選擇使用組件 props ,但考慮到使用 50-100 個(或更多)組件的實際情況,使用 props 很快就會變得乏味。

在開發大型應用程序(即具有數十個組件的應用程序)時,組件之間的數據共享變得更加複雜。這就是為什麼像 Vuex 這樣的解決方案 被創建 - 使狀態管理不那麼痛苦。

Vuex 入門

Vuex 的靈感來自 Facebook 的 Flux 等項目 和 React 的狀態管理庫,Redux ,以盡可能簡單地在您的 Vue 應用程序中存儲和交換反應性數據,同時確保性能和可維護性。

這是通過擁有一個集中式商店來完成的 您從中提取數據和向其中寫入數據。沒有其他方法可以獲取或更改它 - 使其在許多組件上保持一致和穩定。這消除了多個反應組件相互通信時經常導致的不穩定性。

根據其文檔:

這是通過三種方法實現的,對記錄的狀態進行操作。 Getter 用於從 store 中獲取數據,actions 用於異步獲取數據、處理數據並調用 mutation,mutations 用於更改 store 中的源數據。從某種意義上說,你可以想像一個循環:

通過這些元素——您可以執行穩定、可維護的狀態管理。

安裝 Vuex

有幾種安裝 Vuex 的方法——其中大部分取決於你如何創建你的 vue 應用程序。

注意: 如果您已經熟悉 Vuex 的安裝過程,可以跳過本節,前往使用 Vuex 進行集中式狀態管理 部分。

如果您的項目使用 Vue CDN 而不是像 vue-cli 這樣下載的工具 或 vite ,您需要下載 Vuex 源文件並將其包含在您的應用程序標記中:

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

如果你使用的是 vue-cli,你可以直接包含官方的 Vue 包,比如 vue-routervuex 在安裝過程中。

首先,您需要創建一個新的 Vue 項目:

$ vue create project-name

運行它應該會產生以下輸出:

從這裡,您可以使用鍵盤導航到手動選擇功能 選項,添加您的應用程序需要的所有包,包括 Vuex:

或者,如果您有一個使用 vue-cli 創建的現有項目 或者 Vite 之前不支持 Vuex,你可以使用 npm 安裝它 或 yarn

$ npm install vuex --save
# Or yarn
$ yarn add vuex

Vuex 配置

如果您將 Vuex 安裝為帶有 yarn 的包 或 npm ,您必須明確指示 Vue 將其用作插件:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

new Vue({...})

使用 Vuex 進行集中式狀態管理

商店 是 Vuex 應用程序中所有操作的中心。它是一個反應容器,它保存整個應用程序的狀態以及讀取和寫入此狀態集所需的函數。此外,商店中定義的數據或方法是通用的 ,這意味著您可以從您的 vue 應用程序中的任何位置訪問它們。

我們可以通過使用導入的 Vuex 初始化它來輕鬆創建一個新的 Vuex store :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  getters: {}
});

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

雖然它是空的 - 存儲只有一個空狀態、突變、動作和吸氣劑的集合。我們可以通過一個全局的this.$store來訪問這個store實例 實例!不過,在訪問它之前,我們需要在我們的 Vue 實例中註冊它:

new Vue({
  el: '#app',
  store: store,
})

現在,我們可以使用狀態和函數來填充商店,這將使它對我們有用!

Vuex 狀態

考慮 Vuex 狀態 相當於 data 在 Vue 實例中。然而,不同於 data ,您在狀態中存儲的所有內容都是全局的——也就是說,它不限於單個組件,可以在應用程序的任何位置訪問或修改。

您可以通過簡單地將屬性添加到 state 來將條目添加到狀態 store 實例的字段:

const store = new Vuex.Store({
  state: {
    name: "John Doe",
    age: 12,
    details: {
      city: "San Fransisco",
      country: "USA",
    },
  },
});

在這裡,我們為 username 定義了一個狀態 , age , 和 details (包含用戶的 city 的對象 和 country )。 state 的這些屬性 現在全球可訪問!

通常,您會在此處定義一些全局常量。

訪問 Vuex 狀態

檢索狀態值的最簡單方法是從計算屬性中返回狀態。假設我們要訪問全局 nameage 我們店裡的狀態:

computed: {
  name() {
      return this.$store.state.name;
    },
  age() {
     return this.$store.state.age;
    },
}

注意: 當組件需要訪問多個存儲狀態時,聲明所有這些計算屬性可能會變得乏味和冗長。有一個專門為此創建的輔助類,我們稍後會介紹!

當然,現在可以在我們的標記中訪問這些值:

<template>
  <div id="app">
    <p>Name: {{ name }}</p>
    <p>Age: {{ age }}</p>
  </div>
</template>
mapState() 幫手

如上例所示,聲明計算屬性可能會變得非常冗長。預料到這一點,Vuex 附帶了一個用於生成計算 getter 函數的助手。這是一個狀態映射器 並允許您輕鬆地將計算狀態映射到較短的別名。

例如,讓我們導入 mapState() 輔助函數並映射 state.namestate.age 更短的別名:

// First - import mapState
import { mapState } from "vuex";

export default {
  name: "ComponentName",
  computed: mapState({
    name: (state) => state.name,
    age: (state) => state.age,
  }),
};

Getter 函數

Getter 函數是用於get 的函數 來自商店的計算屬性。在獲取屬性時 - 如果需要,您可以選擇在返回數據之前額外過濾、驗證或操作數據。

注意: 使用吸氣劑 獲取數據,而不是修改原始來源。當你可以 過濾和操作您返回給用戶的內容,您不能就地更改原始來源。

例如,假設有一個跟踪整數的狀態。通過 getter 函數,您可以按原樣返回數字, 對它們進行排序並從中切出一些數字以返回:

const store = new Vuex.Store({
  state: {
    myNumbers: [11, 3, 5, 1, 54, 56, ...],
  },
  getters: {
    firstFiveSorted: (state) => {
      return state.myNumbers.sort().slice;
    },
  },
});

這個 getter 現在在 store.getters 中可用 全局對象,也可以在任意組件內部訪問:

//...
computed: {
  firstFiveSorted () {
    return this.$store.getters.firstFiveSorted
  }
}

雖然,這 一段時間後變得冗長。就像你可以映射狀態 到他們的別名,你也可以映射getter 通過 mapGetters() 到他們自己的別名 輔助函數:

import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters({
      // this example will map `myNumbers` to `this.$store.getters.firstFiveSorted`
      myNumbers: "firstFiveSorted",
    }),
  },
};

Vuex 突變

在 Vuex 中,修改源狀態的唯一方法是通過 mutations .您可能會將它們視為 methods Vue 實例中的屬性,但用於修改 Vuex 存儲中的狀態。此外,突變是通過商店進行的 ,以確保更改是可預測的。

注意: 按照慣例,突變名稱大寫,並使用 SNAKE_CASE .

Mutations 將接收狀態作為第一個參數,以及一個可選的有效載荷(即提交突變所需的可選參數)作為第二個參數:

const store = new Vuex.Store({
  state: {
    myNumbers: [11, 3, 5, 1, 54, 56]
  },
  mutations: {
    ADD_NUMBER(state, numberToAdd) {
      state.myNumbers.push(numberToAdd);
    },
  }
})

而且,為了調用突變,我們需要調用 store.commit() 帶有突變名稱及其有效負載的方法,如果有效負載存在:

this.$store.commit('ADD_NUMBER', 75);

調用突變的唯一方法是 commit 對商店的更改,傳入突變的名稱。

注意: 突變的一個缺點是它們必須是同步的 ,即您不能在其中執行異步操作。 Vuex actions 是一個解決方案,我們將在下一節中討論。

動作

動作用於在發生變異之前獲取和處理數據 提交該更改。此外,您可以異步進行多個突變調用 通過動作,而突變本身則同步執行。此外,動作可以調用其他動作,這與必須通過 commit() 調用的突變不同 方法。

操作接收 context 對象和一個可選的有效負載作為它們的參數。上下文對象提供對 context.commit() 等方法的訪問 ,它允許你提交一個突變。 context.state() , 和 context.getters() 允許您訪問商店的狀態和吸氣劑。 context 對象不是 商店實例 - 它只是公開與商店實例相同的屬性。

例如,假設我們要執行一個異步操作,將隨機數添加到 myNumber 數組每 n 秒:

const store = new Vuex.Store({
  state: {
    myNumbers: [11, 3, 5, 1, 54, 56, "..."],
  },
  mutations: {
    ADD_RANDOM_NUMBER(state) {
      // Push a random number to `myNumbers` array
      state.myNumbers.push(Math.floor(Math.random() * 10));
    },
  },
  actions: {
    // Using destructuring to extract only `commit()` from the `context` object
    addNumber({ commit }, time) {
      setInterval(() => {
        commit("ADD_RANDOM_NUMBER");
      }, time * 1000);
    },
  },
});

為了調用動作本身,我們還調用 store 來執行此操作 - 通過 dispatch() 功能:

store.dispatch('ADD_RANDOM_NUMBER', 10);

遍歷 store 可確保狀態僅以可預測的方式更改。

結論

在本指南中,我們了解了 Vuex - Vue 的官方狀態管理商店。

Vuex Store 是狀態、getter、突變和動作的集合。狀態用於定義全局狀態屬性,而 getter 用於獲取它們。您可以將狀態屬性和 getter 映射到較短的別名,以便更輕鬆地引用它們。突變和動作齊頭並進,以可控的方式改變狀態屬性。

有了這個 - 你可以將 Vuex 應用到你的下一個 Vue 項目中!


Tutorial JavaScript 教程
  1. JavaScript Keycode 46 是 DEL 功能鍵還是 (.) 句號?

  2. 在一個函數中利用 React context 和 useContext 僅 React App with Hooks

  3. 在 VuePress 文檔中顯示 Vue 示例

  4. 網上有趣的 JavaScript、jQuery 和隨機 Web 開發——2012 年 3 月

  5. 如何在 Node.js 後端捕獲實體值

  6. Javascript中的方法重載

  7. 使用 HTML 和 React 拖放重新排序

  1. 如何在 Node.js 中構建 Webex 聊天機器人

  2. 如何將 data-* 屬性添加到您的組件庫並在您的 E2E 測試中受益

  3. 通過 Rector 將 PHP 代碼從 8.0 轉換為 7.x

  4. 控制你的 Monorepo 🗄️

  5. NPM 備忘單

  6. 使用 Tailwind 和 Alpine.js 構建儀表板側邊欄

  7. 為什麼你應該使用 React.js 進行 Web 開發

  1. 4 JavaScript 程序檢查字符串的第一個字符是否為小寫

  2. 如何使用 React 構建複雜的動態輸入表單

  3. 2分鐘JS面試/OOP中的繼承

  4. 如何在結束後使用 faker.js