vuex 简单使用

vuex 简单使用

---

示例：管理一个对象状态

假设我们要管理一个用户对象 user，包含 name 和 age 两个属性。

---

1. 定义 Vuex Store

在 store/index.js 中定义状态、mutations、actions 和 getters：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    user: {
      name: 'John Doe',
      age: 30
    }
  },
  mutations: {
    // 更新用户名称
    updateUserName(state, newName) {
      state.user.name = newName;
    },
    // 更新用户年龄
    updateUserAge(state, newAge) {
      state.user.age = newAge;
    },
    // 更新整个用户对象
    updateUser(state, newUser) {
      state.user = newUser;
    }
  },
  actions: {
    // 异步更新用户名称
    updateUserNameAsync({ commit }, newName) {
      setTimeout(() => {
        commit('updateUserName', newName);
      }, 1000);
    }
  },
  getters: {
    // 获取用户全名
    fullName(state) {
      return state.user.name;
    },
    // 获取用户年龄
    userAge(state) {
      return state.user.age;
    }
  }
});

export default store;

---

2. 在组件中使用组合式 API 管理对象

在组件中，使用 useStore 钩子访问 Vuex store，并通过 computed 和 methods 来操作对象状态。

---

3. 代码说明

1. State:

   • state.user 是一个对象，包含 name 和 age 属性。

2. Mutations:

   • updateUserName：更新用户名称。
   • updateUserAge：更新用户年龄。
   • updateUser：更新整个用户对象（如果需要一次性更新多个属性）。

3. Actions:

   • updateUserNameAsync：模拟异步操作，1 秒后更新用户名称。

4. Getters:

   • fullName：返回用户的全名。
   • userAge：返回用户的年龄。

5. 组件逻辑:

   • 使用 computed 获取 Vuex 中的状态。
   • 使用 ref 绑定输入框的值。
   • 通过 commit 提交 mutations 或 dispatch 分发 actions 来更新状态。

---

4. 运行效果

• 输入新姓名并点击“更新姓名”按钮，会立即更新 Vuex 中的 user.name。
• 输入新年龄并点击“更新年龄”按钮，会立即更新 Vuex 中的 user.age。
• 点击“异步更新姓名”按钮，1 秒后会更新 Vuex 中的 user.name。

---

总结

通过这种方式，你可以轻松管理 Vuex 中的对象状态。组合式 API 提供了更灵活的方式来访问和操作 Vuex store，同时保持代码的可读性和可维护性。如果你有更复杂的需求（如嵌套对象或数组），也可以使用类似的方式管理。