vue3——vuex简单使用及持久化

最新推荐文章于 2025-05-21 13:58:53 发布

原创

最新推荐文章于 2025-05-21 13:58:53 发布 · 1.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了Vuex在Vue2和Vue3中的应用，详细讲解了Vuex的基本概念，如state、mutations、actions、getters和modules。在Vue3中设置和使用Vuex的方法，以及如何进行持久化处理，包括使用特定库实现数据在刷新后的保留。最后，文章展示了持久化处理的效果并做了总结。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

vue2和vue3中如何使用vuex呢？有什么不同之处呢？vue3中vuex如何做持久化处理呢？本篇文章将给你答疑解惑，一起来看一下吧~

一、什么是vuex？

官网：vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex可以统一管理项目中公用的数据，借助vue调试工具可以记录每一次的修改，以及修改者。

1. vuex中的模块

vuex中有五大模块,分别是：

state -------->需要管理的数据存放在这里
mutations------->唯一可以同步修改state的地方
actions------->异步修改state,本质还是通过mutations修改
getters------->类似组件中的计算属性
modules------->如果需要vuex管理的数据多的话，可以拆分为一个个模块

2. 快速上手

这里就不给大家过多介绍了，可以看一下之前的博客：快速了解vuex，里面也有vue2中使用方式哦~

二、vue3中使用vuex

1. 准备

src/store文件夹下新建modules文件夹
modules文件夹下新建user.js文件

代码如下（示例）：

// 用户
export default {
   
   
  // 开启命名空间
  namespaced: true,
  state: {
   
   
    info: {
   
   
      uname: 'Leo',
      age: 21
    }
  },
  mutations: {
   
   
    updateUname(state, val) {
   
   
      state.info.uname = val
    },
    updateAge(state, val