vuex简单使用

人工智能
2025-08-30 12:18:02

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 mit('updateUserName', newName.value); newName.value = ''; // 清空输入框 }; // 更新用户年龄 const updateAge = () => { store mit('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 来更新状态。

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