【Vue】使用 Vuex 作為狀態(tài)管理

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式和庫。它使用單一狀態(tài)樹，這意味著這個對象包含了全部的應(yīng)用層級狀態(tài)，并且以一種相對集中的方式存在。這也意味著，通常單個項目中只有一個 Vuex store。Vuex 的核心概念和功能包括：

1. 狀態(tài)（State）：Vuex 使用單一狀態(tài)樹，即一個對象包含了整個應(yīng)用的狀態(tài)。狀態(tài)存儲是響應(yīng)式的，當(dāng) Vue 組件從 store 中讀取狀態(tài)時，若狀態(tài)發(fā)生變化，相關(guān)組件也會相應(yīng)更新。

2. 視圖（View）：Vue 組件輸出狀態(tài)的可視化表示。

3. 行為（Actions）：響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。

除此之外，Vuex 還有以下幾個核心概念：

1. Getters：允許組件從 store 中獲取狀態(tài)，同時可以對狀態(tài)進(jìn)行一些預(yù)處理。

2. Mutations：更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的事件類型 (type) 和一個回調(diào)函數(shù) (handler)。

3. Actions：類似于 mutations，不同在于它們提交的是 mutations，而不是直接變更狀態(tài)。Actions 可以包含任意異步操作。

4. Modules：由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當(dāng)臃腫。為了解決這個問題，Vuex 允許我們將 store 分割成模塊（module）。

Vuex 是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會自動更新。這也意味著 Vuex 中的狀態(tài)不能直接改變，只能通過顯式提交 mutations 來更改。

使用案例

假設(shè)我們正在開發(fā)一個購物車應(yīng)用，用戶可以將商品添加到購物車中，查看購物車中的商品，以及清空購物車。在這個例子中，我們將創(chuàng)建一個 Vuex store 來管理購物車的狀態(tài)。

首先，你需要在你的 Vue 項目中安裝和引入 Vuex：

pnpm install vuex --save

然后，在你的 Vue 項目中創(chuàng)建一個 Vuex store：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cart: []
  },
  getters: {
    cartItemCount: state => {
      return state.cart.length
    },
    cartTotalPrice: state => {
      return state.cart.reduce((total, item) => {
        return total + item.price * item.quantity
      }, 0)
    }
  },
  mutations: {
    addToCart(state, item) {
      const found = state.cart.find(product => product.id === item.id)

      if (found) {
        found.quantity++
      } else {
        state.cart.push({ ...item, quantity: 1 })
      }
    },
    removeFromCart(state, item) {
      const index = state.cart.indexOf(item)
      if (index > -1) {
        state.cart.splice(index, 1)
      }
    },
    clearCart(state) {
      state.cart = []
    }
  },
  actions: {
    addToCart({ commit }, item) {
      commit('addToCart', item)
    },
    removeFromCart({ commit }, item) {
      commit('removeFromCart', item)
    },
    clearCart({ commit }) {
      commit('clearCart')
    }
  }
})

在上面的代碼中，我們定義了：

1. State：購物車數(shù)組 cart。
2. Getters：cartItemCount 和 cartTotalPrice 用于獲取購物車中的商品數(shù)量和總價。
3. Mutations：addToCart、removeFromCart 和 clearCart 用于修改購物車的狀態(tài)。
4. Actions：包裝了 mutations 的方法，這里是 addToCart、removeFromCart 和 clearCart。

最后，在你的 Vue 組件中使用這個 store：

// 在一個組件中
<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['cartItemCount', 'cartTotalPrice'])
  },
  methods: {
    ...mapActions(['addToCart', 'removeFromCart', 'clearCart']),
    addItemToCart(item) {
      this.addToCart(item)
    },
    removeItemFromCart(item) {
      this.removeFromCart(item)
    },
    emptyCart() {
      this.clearCart()
    }
  }
}
</script>

完整代碼

<template>
  <div class="shopping-cart">
    <h2>購物車</h2>

    <div v-if="cartItemCount === 0">
      購物車為空。
    </div>

    <div v-else>
      <ul>
        <li v-for="(item, index) in cart" :key="index">
          {{ item.name }} - {{ item.quantity }} x {{ item.price }}元
          <button @click="removeItemFromCart(item)">移除</button>
        </li>
      </ul>

      <p>總價: {{ cartTotalPrice }}元</p>

      <button @click="emptyCart">清空購物車</button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'ShoppingCart',

  computed: {
    ...mapGetters(['cartItemCount', 'cartTotalPrice']),
    cart() {
      return this.$store.state.cart
    }
  },

  methods: {
    ...mapActions(['removeFromCart', 'clearCart']),

    removeItemFromCart(item) {
      this.removeFromCart(item)
    },

    emptyCart() {
      this.clearCart()
    }
  }
}
</script>

<style scoped>
.shopping-cart {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  margin: 20px auto;
  width: 300px;
}

.shopping-cart h2 {
  color: #333;
}

.shopping-cart ul {
  list-style-type: none;
  padding: 0;
}

.shopping-cart ul li {
  margin-bottom: 10px;
  line-height: 1.6;
}

.shopping-cart button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 5px 10px;
  margin-left: 10px;
  border-radius: 3px;
  cursor: pointer;
}

.shopping-cart button:hover {
  background-color: #333;
}
</style>

文章來源地址http://www.zghlxwxcb.cn/news/detail-816679.html

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