vue3 vuex案例

Vue3 中的 Vuex 是一个专门为 Vue.js 应用程序设计的状态管理模式，它提供了一种集中管理组件之间共享状态的方式。下面是一个简单的Vuex案例：

假设我们有一个用户登录系统的应用，需要存储用户的登录状态和用户名。首先，你需要安装 Vuex 和 Vuex 的 CLI 插件：

npm install vuex --save

然后创建一个 `store` 文件，如 `store/usersStore.js`：

import { createStore } from 'vuex';

// 定义状态（state）
const state = {
  user: null,
  username: ''
};

// 定义动作（mutations）
const mutations = {
  SET_USER(state, user) {
    state.user = user;
  },
  SET_USERNAME(state, username) {
    state.username = username;
  }
};

// 定义getter获取数据
const getters = {
  isLoggedIn: (state) => !!state.user,
  getUsername: (state) => state.username
};

export default createStore({
  state,
  mutations,
  getters
});

接着，在你的 Vue 组件里，通过 `mapState` 和 `mapMutation` 注入到组件内部：

<template>
  <div>
    {{ isLoggedIn ? "已登录" : "未登录" }} - {{ getUsername }}
    <button @click="logout">登出</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState(['isLoggedIn', 'username']), // 获取状态
  },
  methods: {
    logout() {
      this.$store.commit('SET_USER', null); // 调用 mutation 清除用户信息
    }
  },
  ...mapMutations([
    'SET_USERNAME' // 注入 mutaion 以便于直接调用
  ])
};
</script>

在这个例子中，`Vuex` 存储了用户状态，并允许组件通过 actions（这里省略了）来进行状态更新。当你在多个地方需要用到这个登录状态时，只需要导入并注入 `store` 就可以。