存儲相關(guān)

Vuex 和本地存儲（如localStorage）以及 cookie 存儲（如 document.cookie）之間有一些關(guān)系，但它們是不同的概念，用于不同的目的。

1. Vuex：

   • Vuex 是 Vue.js 的官方狀態(tài)管理庫，用于在 Vue.js 應(yīng)用程序中管理應(yīng)用程序的全局狀態(tài)。
   • Vuex 主要用于在前端應(yīng)用程序中存儲和管理各種狀態(tài)，包括用戶信息、應(yīng)用程序配置、數(shù)據(jù)緩存等。它提供了一個中心化的狀態(tài)存儲機制，可以讓不同組件之間共享和同步狀態(tài)。
   • Vuex 的數(shù)據(jù)存儲在內(nèi)存中，通常不會持久化到硬盤上。

2. 本地存儲（localStorage）：

   • localStorage 是瀏覽器提供的一種本地存儲機制，允許你將數(shù)據(jù)以鍵值對的形式存儲在瀏覽器中，數(shù)據(jù)可以在不同頁面和會話之間保持持久性。
   • localStorage 主要用于在瀏覽器中存儲小量的數(shù)據(jù)，如用戶配置、用戶首選項、臨時會話數(shù)據(jù)等。它是一個簡單的持久化數(shù)據(jù)存儲工具。

3. Cookie 存儲：

   • cookie 是另一種在瀏覽器中存儲數(shù)據(jù)的方式，但它通常用于存儲小的文本數(shù)據(jù)，如用戶身份驗證令牌、會話標識等。
   • cookie 具有一些限制，如每個 cookie 的大小限制和安全性考慮，因此不適合用于存儲大量數(shù)據(jù)或敏感信息。

關(guān)系和用途：

• Vuex 可以與本地存儲和 cookie 存儲結(jié)合使用，以實現(xiàn)更復(fù)雜的狀態(tài)管理和數(shù)據(jù)持久化。例如，你可以將某些重要的應(yīng)用程序狀態(tài)存儲在 Vuex 中，同時將用戶首選項或會話令牌等數(shù)據(jù)存儲在 localStorage 或 cookie 中。
• Vuex 可以使用 localStorage 或其他存儲機制來實現(xiàn)狀態(tài)的持久化，以便在頁面刷新或重新加載時保持應(yīng)用程序狀態(tài)不變。這通常涉及到將狀態(tài)數(shù)據(jù)從 Vuex 存儲到 localStorage 中，并在應(yīng)用程序初始化時從 localStorage 恢復(fù)狀態(tài)。

需要注意的是，存儲敏感信息（如用戶密碼）通常不應(yīng)存儲在本地存儲或 cookie 中，而應(yīng)使用更安全的方式，如后端服務(wù)器的會話管理或令牌驗證。存儲在本地的數(shù)據(jù)應(yīng)該是非敏感的，并經(jīng)過適當?shù)募用芎桶踩蕴幚怼?/p>

基本屬性

Vuex 是 Vue.js 的官方狀態(tài)管理庫，用于在Vue.js應(yīng)用程序中管理應(yīng)用程序的全局狀態(tài)。Vuex.Store 是 Vuex 的核心部分之一，它包含了狀態(tài)（state）、變化狀態(tài)的方法（mutations）、觸發(fā)狀態(tài)變化的方法（actions）以及獲取狀態(tài)的方法（getters）。

在 Vuex.Store 中，state 和 mutations 分別用于存儲和修改應(yīng)用程序的狀態(tài)。

1. state（狀態(tài)）：state 是應(yīng)用程序的數(shù)據(jù)源。它是一個普通的 JavaScript 對象，包含了應(yīng)用程序的全局狀態(tài)數(shù)據(jù)。通過訪問 state，你可以獲取應(yīng)用程序的當前狀態(tài)信息。例如：

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

   在上面的示例中，state 包含一個名為 count 的狀態(tài)屬性，初始值為 0。

2. mutations（變化）：mutations 是用來修改 state 的方法。它們是同步的函數(shù)，每個 mutation 接收一個當前狀態(tài)的參數(shù)（state）和一個用于更新狀態(tài)的參數(shù)（通常稱為 payload）。mutations 的主要作用是確保狀態(tài)變更的可追蹤性，因為每個狀態(tài)的變更都必須經(jīng)過一個明確的步驟。例如：

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

   在上面的示例中，我們定義了兩個 mutations，分別用于增加和減少 count 狀態(tài)的值。要觸發(fā)這些 mutations，你可以通過 store.commit 方法來調(diào)用它們：

   store.commit('increment') // 增加 count
   store.commit('decrement') // 減少 count
   

   通過使用 commit 方法，你可以確保在應(yīng)用程序的狀態(tài)發(fā)生變化時進行跟蹤和記錄。

總之，Vuex.Store 中的 state 用于存儲應(yīng)用程序的全局狀態(tài)，而 mutations 用于定義可追蹤的方法，用于修改狀態(tài)。這種明確的狀態(tài)管理方式有助于在大型應(yīng)用程序中更好地管理和維護狀態(tài)。

actions和getters

當使用 Vuex 進行狀態(tài)管理時，除了 state 和 mutations，還有 actions 和 getters 來進一步組織和管理你的應(yīng)用程序的狀態(tài)。

1. Actions（動作）：

   • Actions 是用于處理異步操作和業(yè)務(wù)邏輯的地方。它們可以包含任何 JavaScript 代碼，并且可以觸發(fā) mutations 來修改 state。

   • Actions 是通過 store.dispatch 方法來觸發(fā)的，可以接受一個對象參數(shù)，其中包含要傳遞給 mutation 的數(shù)據(jù)。這樣可以將異步操作和數(shù)據(jù)獲取與 mutations 分離開來，使代碼更具可維護性。

   示例：

   const store = new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment(state) {
         state.count++
       }
     },
     actions: {
       asyncIncrement(context) {
         setTimeout(() => {
           context.commit('increment') // 觸發(fā) mutation 增加 count
         }, 1000)
       }
     }
   })
   
   // 在組件中觸發(fā) action
   store.dispatch('asyncIncrement') // 1 秒后增加 count
   

2. Getters（獲取器）：

   • Getters 用于從 state 中派生出一些衍生狀態(tài)或者進行一些計算。它們允許你在組件中獲取并使用派生的狀態(tài)，而不需要在組件內(nèi)部重復(fù)相同的計算邏輯。

   • Getters 定義為一個函數(shù)，接受 state 作為參數(shù)，可以返回根據(jù) state 計算得出的新狀態(tài)。

   示例：

   const store = new Vuex.Store({
     state: {
       items: [
         { id: 1, name: 'Item 1', price: 10 },
         { id: 2, name: 'Item 2', price: 20 },
         { id: 3, name: 'Item 3', price: 30 }
       ]
     },
     getters: {
       totalPrice(state) {
         return state.items.reduce((total, item) => total + item.price, 0)
       }
     }
   })
   
   // 在組件中使用 getter
   const total = store.getters.totalPrice // 獲取總價格，值為 60
   

   在上面的示例中，totalPrice 是一個 getter，它計算了所有商品的總價格。通過使用 getter，你可以在組件中輕松地獲取這個派生的狀態(tài)，而不必在每個組件中都重新計算。

總之，actions 用于處理異步操作和業(yè)務(wù)邏輯，而 getters 用于派生狀態(tài)或進行計算，它們都有助于更好地組織和管理 Vuex 應(yīng)用程序的狀態(tài)。

vuex中的dispatch

dispatch 是 Vuex 中用于觸發(fā)一個 action 的方法。action 是用于處理異步操作和業(yè)務(wù)邏輯的一種機制，它可以包含任何 JavaScript 代碼，并且可以觸發(fā) mutation 來修改 state。

使用 dispatch 方法可以在組件中觸發(fā)一個 action，并傳遞一些參數(shù)給該 action。在 action 內(nèi)部，你可以執(zhí)行異步操作，例如發(fā)送網(wǎng)絡(luò)請求、處理數(shù)據(jù)，然后在需要時觸發(fā)相關(guān)的 mutation 來更新應(yīng)用程序的狀態(tài)。

示例：

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    asyncIncrement(context) {
      // 模擬異步操作，例如發(fā)送網(wǎng)絡(luò)請求
      setTimeout(() => {
        context.commit('increment'); // 觸發(fā) mutation 增加 count
      }, 1000);
    },
  },
});

// 在組件中觸發(fā) action
store.dispatch('asyncIncrement'); // 1 秒后增加 count

在上面的示例中，我們創(chuàng)建了一個名為 asyncIncrement 的 action，它包含了一個異步的 setTimeout 操作。當調(diào)用 store.dispatch('asyncIncrement') 時，它會在一秒后觸發(fā) increment mutation 來增加 count。這樣，我們就可以使用 dispatch 方法來觸發(fā)異步操作，并在操作完成后更新應(yīng)用程序的狀態(tài)。

總之，dispatch 方法是用于觸發(fā) Vuex 中的 action 的工具，它允許你在組件中進行異步操作，并與應(yīng)用程序的狀態(tài)進行交互。這有助于更好地管理和組織 Vuex 應(yīng)用程序中的業(yè)務(wù)邏輯。文章來源地址http://www.zghlxwxcb.cn/news/detail-707871.html

到了這里，關(guān)于vue~vuex的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！