vuex配置和使用（vue3配置）

个人理解可能会有所偏差

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 来调用 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。

感谢观看