个人理解可能会有所偏差

1、基础使用

首先在创建项目时可以选择vuex和一些其他的配置，如果选择那么他会自动创建store文件夹生成默认格式，如果没有选择可以使用指令：

npm install vuex@next --save

然后手动创建即可

import { createStore } from 'vuex';const store = createStore({state() {return {count: 0,index:'测试文字'};},mutations: {increment(state) {state.count++;},},actions: {incrementAsync({ commit }) {setTimeout(() => {commit('increment');}, 1000);},},getters: {count: (state) => state.count,},
});export default store;

创建完毕之后在main.js中注册即可

使用方法

简单例子

<template><div><p>Count变量: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="tong_bu">同步加1</button><button @click="yi_bu">异步加1</button></div>
</template><script setup>
import { ref,computed } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
// 访问状态
const count = computed(() => store.state.count);
// 提交 mutation
const tong_bu = () =>{store.commit('increment');
console.log(1);
}
// 分发 action
function yi_bu() {store.dispatch('incrementAsync');console.log(1);
}
// 访问 getter
const doubleCount = computed(() => store.getters.doubleCount);
</script>

那么以上就是简单的使用方法

---

那么新的问题来了。（注：这段没什么用可以跳过可以直接看5拓展补充）

场景：我们登录成功后应该使用本地存储还是vuex呢？是一个问题，我们可以一块结合使用，因为我们在访问下一页或者页面刷新时令牌可能会丢失，所以我们需要一起结合使用。

2、使用 Vuex

• 访问控制和响应式更新：Vuex 提供了一种集中管理和访问控制应用状态的方式，包括用户的登录状态和账号信息。使用 Vuex 可以轻松地在多个组件之间共享登录状态，且状态的更新会自动反映到依赖这些状态的组件中。
• 非持久化：Vuex 的状态默认是非持久化的；当页面刷新或关闭时，存储在 Vuex 中的状态会丢失。这意味着如果用户刷新了页面，你可能需要从本地存储重新加载用户的登录状态和账号信息到 Vuex。

3、使用本地存储

• 持久化：localStorage 和 sessionStorage 提供了简单的 API 来持久化数据在用户的浏览器中。使用本地存储可以在用户会话间保留登录状态和账号信息，即使页面被刷新或关闭后也能保留这些信息。
• 安全考虑：存储敏感信息（如令牌、密码等）时需要小心。虽然本地存储提供了持久化能力，但它易于被跨站脚本（XSS）攻击读取。因此，敏感信息应该谨慎存储，避免直接存储用户的密码，仅存储身份验证令牌，并使用 HTTPS 来保护传输过程。

4、结合使用 Vuex 和本地存储

一个常见的做法是结合使用 Vuex 和本地存储来管理登录状态和账号信息：

1. Vuex：用于应用内部管理和访问用户的登录状态和账号信息。这使得应用能够响应状态的变化，更新 UI 并提供动态交互。

2. 本地存储：用于在页面刷新或关闭后持久化用户的登录状态（通常是令牌）。应用启动时，从本地存储加载登录状态并初始化 Vuex 的状态。

例子：

当用户成功登录时，保存令牌到本地存储并更新 Vuex 状态：

// 登录成功后
localStorage.setItem('authToken', authToken); // 保存令牌到本地存储store.commit('setAuthToken', authToken); // 更新 Vuex 状态

在 Vuex Store 的 index.js 文件中直接初始化

对于较小的应用，你可以直接在 Vuex store 的 index.js 文件中添加这段代码，确保它在应用启动时执行。

// store/index.js
import { createStore } from 'vuex';const store = createStore({state() {return {authToken: null,};},mutations: {setAuthToken(state, authToken) {state.authToken = authToken;},},actions: {initializeStore({ commit }) {const authToken = localStorage.getItem('authToken');if (authToken) {commit('setAuthToken', authToken);}},},
});// 调用初始化 action
store.dispatch('initializeStore');export default store;

在这个例子中，我们定义了一个 initializeStore 的 action 来从 localStorage 加载 authToken 并提交 mutation 更新状态。然后，在创建 store 之后立即调用这个 action。

应用启动时，从本地存储加载令牌并初始化 Vuex：

意思是在main.js中这么写。初始化 store

const authToken = localStorage.getItem('authToken');
if (authToken) {store.commit('setAuthToken', authToken);
}

这种方法结合了 Vuex 的响应式状态管理和本地存储的持久化能力，能够提供良好的用户体验，同时确保用户状态在需要的时候得到保留。

5、拓展（补充）

安装一个命令 这个方法是 持久化存储

npm install vuex-persistedstate

好

5.1、在store下面创建文件夹modules并在他的下面创建xxx.js（如：login.js）

目录

5.2、写入自己的方法

我这个是登录成功之后的存储

export const login = {namespaced:true,state: () => ({userInfo: {}, // 用于存储用户信息}),mutations: {// 更新用户信息setUserInfo(state, userInfo) {state.userInfo = userInfo;},},actions: {// 异步更新用户信息updateUserInfo({ commit }, userInfo) {// 假设这里是一些异步操作，如 API 调用// 完成后，使用 commit 来调用 mutationcommit('setUserInfo', userInfo);},},getters: {// 现在激活并使用 getter// loginName: state => state.userInfo.name, // 假设 userInfo 是一个对象，有一个 name 属性getUserInfo: state => state.userInfo,},};

5.3、index.js配置

引入

import { createStore } from 'vuex';
import { login } from '@/store/modules/login'
import createPersistedState from 'vuex-persistedstate';

  modules:{
login:login//登录模块},plugins:[createPersistedState({paths: ['login'], // 持久化 login 模块}),

这两句代码在getters后面写

5.4、home页面

引入下方文件

import { computed } from 'vue';
import { useStore } from 'vuex';

// vuex
const store = useStore();

当你登录成功后存储商品信息

     // 假设 res 是包含用户信息的对象store.commit('login/setUserInfo', res); // 提交 mutation 更新用户信息

打印查看

const userInfo = computed(() => store.getters['login/getUserInfo']);console.log(userInfo,'用户信息');

打印出来的数据位置应该是->ComputedRefImpl->value->target->获取到的数据data。

感谢观看