当前位置：首页 > news >正文

vuex 简单使用

news 来源：原创 2025/5/5 11:13:00

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 来操作对象状态。

<template>
  <div>
    <h1>用户信息</h1>
    <p>姓名: {{ fullName }}</p>
    <p>年龄: {{ userAge }}</p>

    <input v-model="newName" placeholder="输入新姓名" />
    <button @click="updateName">更新姓名</button>

    <input v-model="newAge" placeholder="输入新年龄" type="number" />
    <button @click="updateAge">更新年龄</button>

    <button @click="updateNameAsync">异步更新姓名</button>
  </div>
</template>

<script>
import { computed, ref } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    // 使用 computed 获取状态
    const fullName = computed(() => store.getters.fullName);
    const userAge = computed(() => store.getters.userAge);

    // 使用 ref 定义输入框的绑定值
    const newName = ref('');
    const newAge = ref('');

    // 更新用户名称
    const updateName = () => {
      store.commit('updateUserName', newName.value);
      newName.value = ''; // 清空输入框
    };

    // 更新用户年龄
    const updateAge = () => {
      store.commit('updateUserAge', parseInt(newAge.value, 10));
      newAge.value = ''; // 清空输入框
    };

    // 异步更新用户名称
    const updateNameAsync = () => {
      store.dispatch('updateUserNameAsync', newName.value);
      newName.value = ''; // 清空输入框
    };

    return {
      fullName,
      userAge,
      newName,
      newAge,
      updateName,
      updateAge,
      updateNameAsync
    };
  }
};
</script>

3. 代码说明

State:
- state.user 是一个对象，包含 name 和 age 属性。
Mutations:
- updateUserName：更新用户名称。
- updateUserAge：更新用户年龄。
- updateUser：更新整个用户对象（如果需要一次性更新多个属性）。
Actions:
- updateUserNameAsync：模拟异步操作，1 秒后更新用户名称。
Getters:
- fullName：返回用户的全名。
- userAge：返回用户的年龄。
组件逻辑:
- 使用 computed 获取 Vuex 中的状态。
- 使用 ref 绑定输入框的值。
- 通过 commit 提交 mutations 或 dispatch 分发 actions 来更新状态。