个人理解可能会有所偏差
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 和本地存储来管理登录状态和账号信息：
-
Vuex：用于应用内部管理和访问用户的登录状态和账号信息。这使得应用能够响应状态的变化，更新 UI 并提供动态交互。
-
本地存储：用于在页面刷新或关闭后持久化用户的登录状态（通常是令牌）。应用启动时，从本地存储加载登录状态并初始化 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 来调用 mutation
commit('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。
感谢观看
