Vuex 加深印象——亲身体验 Vuex 方法

2024-01-26 10:06:31

前言

为了加深对 Vuex 的印象，以及对 Vuex 中各种方法的调用方式有更深入的了解，我决定通过一个实际案例来体验一把。案例如下：

案例

我们创建一个简单的购物清单应用，用户可以在其中添加、删除和修改商品。

1. 新建项目

vue create shop

2. 安装 Vuex

npm install vuex

3. 在 Vuex 中定义状态

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

Vue.use(Vuex)

const state = {
  // 购物清单
  shoppingList: []
}

const mutations = {
  // 添加商品
  ADD_ITEM(state, item) {
    state.shoppingList.push(item)
  },
  // 删除商品
  REMOVE_ITEM(state, item) {
    state.shoppingList.splice(state.shoppingList.indexOf(item), 1)
  },
  // 修改商品
  EDIT_ITEM(state, payload) {
    const item = state.shoppingList.find(item => item.id === payload.id)
    item.name = payload.name
    item.price = payload.price
  }
}

const actions = {
  // 添加商品
  addItem({ commit }, item) {
    commit('ADD_ITEM', item)
  },
  // 删除商品
  removeItem({ commit }, item) {
    commit('REMOVE_ITEM', item)
  },
  // 修改商品
  editItem({ commit }, payload) {
    commit('EDIT_ITEM', payload)
  }
}

const getters = {
  // 获取购物清单总价
  totalPrice(state) {
    return state.shoppingList.reduce((total, item) => total + item.price, 0)
  },
  // 获取购物清单中商品数量
  totalItems(state) {
    return state.shoppingList.length
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

4. 在组件中使用 Vuex

// components/Shop.vue
<template>
  <div>
    <ul>
      <li v-for="item in shoppingList" :key="item.id">
        {{ item.name }} - {{ item.price }}
        <button @click="removeItem(item)">X</button>
        <button @click="editItem(item)">编辑</button>
      </li>
    </ul>
    <p>总价：{{ totalPrice }}</p>
    <p>商品数量：{{ totalItems }}</p>
    <form @submit.prevent="addItem">
      <input type="text" v-model="newItemName" placeholder="商品名称">
      <input type="number" v-model="newItemPrice" placeholder="商品价格">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['shoppingList', 'totalPrice', 'totalItems']),
    ...mapGetters(['totalPrice', 'totalItems'])
  },
  methods: {
    ...mapActions(['addItem', 'removeItem', 'editItem']),
    // 添加商品
    addItem(e) {
      this.addItem({
        name: this.newItemName,
        price: this.newItemPrice
      })
      this.newItemName = ''
      this.newItemPrice = ''
    },
    // 删除商品
    removeItem(item) {
      this.removeItem(item)
    },
    // 修改商品
    editItem(item) {
      const newName = prompt('请输入新的商品名称：')
      const newPrice = prompt('请输入新的商品价格：')
      if (newName && newPrice) {
        this.editItem({
          id: item.id,
          name: newName,
          price: newPrice
        })
      }
    }
  }
}
</script>