在vue2和vue3中Vuex的使用及其持久化存储,mutation和actions的区别

最新推荐文章于 2025-04-29 10:55:39 发布
最新推荐文章于 2025-04-29 10:55:39 发布
阅读量1.4k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/VVVVV16/article/details/127837353
本文详细介绍了Vuex在Vue项目中的核心概念，包括state、getters、mutations和actions的区别，以及模块化管理的实践。通过实例演示了如何配置、使用和处理异步操作，重点突出了Vuex在状态持久化存储和合理组织大型项目的解决方案。

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

就像官网所说的  vuex  就是一个用来做状态管理的库,它就像一个仓库一样存了许多的状态和方法

哪个组件使用,我们就直接在那个组件中引用就行.

在vuex中,有state,getters,mutations,actions,modules这些属性

state,类似于组件中的data,用来存放数据

getters,类似于组件中的computed

mutations,类似于组件中的methods

actions,提交mutions的

modules,把以上4个属性进行细分,让仓库更好的管理

当然,说归说,我们还是要看一下在实际中怎么进行使用

先安装一下: 

npm install vuex@next --save

 先创建一个文件夹

基本配置 

在vue2中

这样  我们就完成了基本的一个配置

在vue3中

 我们需要先在main.js中将store.js导入进来  并 挂载

 这样  我们也完成了基本的一个配置

接下来,进行使用.先从state开始:

 不论vue2和vue3

state相当于组件的data

我们直接在这里写一个str

然后   导入 并 使用

 效果:

然后,看一下getters

 不论vue2和vue3

 这个getters就类似于computed计算属性   所以我们就会发现这个1也只是打印了一次

 导入并使用

 效果

接下来mutations

 不论vue2和vue3

mutations就相当于组件的methods

 导入组件中 使用

 效果

 接下来Actions

  不论vue2和vue3

 在组件中导入并使用

 结果

到这里  我们就发现  一个问题,感觉mutations和这个Actions好像   都是一个方法然后 也都能实现 同样的功能   除了 参数有点不一样以外   

那么这两个到底有什么区别??

我们可以引入异步 再来进行操作一下

mutations:

 效果

 

我们发现  使用mutations 中的方法   在异步操作的时候  视图更新了 而 这个数据却没有变化

当我们换成Actions

 使用Actions将mutations这个里面的方法commit出去  以后  我们这个  视图 和数据就同步更新了

也就解决了异步的需求

最后,我们看一下modules

  不论vue2和vue3

假设  一个 这样的场景   我们有一个  项目 有50以上的state

这样的话  我们应该怎么去管理这个东西

都写在这一个  页面  会感到  比较复杂   难以区分

这时候   就有了  modules

 我们创建两个单独的文件

cate.js中

 path.js中

 然后  统一导入到store.js中

 然后  我们想要在组件中使用cate.js和path.js中的数据时

 效果:

 ok  这样就把所有的  Vuex的属性给做完了 基本上的使用 就这样

然后,来看一下  持久化存储

持久化存储的话,有两个实现方式

一个是自己手动localStorage

 另一个就是使用vuex-persist等插件

 

湖边看客
关注
Vue 63 ，Vuex状态、数据持久化（Vue2、Vue3状态数据持久化）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
03-22 5466
⭐Vuex是一个仓库，是vue的状态管理工具，存放公共数据，任何组件都可以使用vuex里的公共数据。Vuex提供了插件系统，允许我们使用 vuex-persistedstate插件，将Vuex的状态持久化到本地存储中，解决页面刷新或重新打开应用时状态丢失的问题，这里分享Vuex数据持久化的几种实现方案。
Vue 之 Vuex，存储本地数据 并 保证刷新不丢失（ VueCli2+JavaScript 与 VueCli4+TypeScript中store写法的区别）
窝窝头的博客
11-11 1165
一、【VueCli3+】版本说明及需要安装的中间件，以下中间件没有的，就需要安装一哈子 具体代码开源到github，欢迎star 1.1、以下是 VueCli3+ 中的store (Vue + VueCli3+ TavaScript + iviewUI + Vuex) "vue": "^2.6.10", "vue-class-component": "^7.0.2", ...
vue2之vuex实现数据持久化（vuex-persistedstate）插件
东小小川
03-02 1211
vue2之vuex实现数据持久化（vuex-persistedstate）插件
Vuex状态管理及其持久化使用指南
最新发布
2303_76234920的博客
04-29 916
npm install vuex@4 # Vuex 4 兼容 Vue 2 和 Vue 3// 持久化插件// 定义子模块（示例：用户模块）namespaced: true, // 开启命名空间state: {age: 18},},},actions: {},getters: {// 主 Storestate: {count: 0,loginStatus: '用户已经登录'},},},actions: {},getters: {
VueX插件、持久化存储、分包module模块vuex
weixin_51040108的博客
10-19 960
VueX插件、持久化存储、分包module模块vuex
【Vue】Vuex状态持久化存储
cannotbecounted的博客
07-31 1298
对Vuex中状态的持久化存储如何实现进行简要的介绍。
vue2 vuex存储以及数据持久化和模块化
YWW_ABC的博客
05-11 2945
vuex是什么,干什么用的？ vuex是一个状态管理工具，主要是用来解决中大型项目中数据共享的 为什么要模块化？ 让项目代码合理的分配，使其代码更加清晰，方便后期管理
【Uni-App】Vuex在vue3版本中的使用与持久化
RisunJan的博客
01-26 3906
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。基本元素：store（里面存数据），mutation（里面修改数据），action（里面异步调用mutation来修改数据），getter（获取数据）简而言之就是用来存数据，可以有效减少使用组件传参困扰的头痛。
vuex的使用及持久化state的方式详解
11-28
- **Vuex ORM**：如果你的应用涉及到大量数据，可以考虑使用像 Vuex-ORM 这样的库，它允许你在 Vuex 中使用对象关系映射（ORM），并提供持久化支持。 通过以上方式，我们可以有效地管理 Vue.js 应用的状态，并在...
前端开发：Vue项目中Vuex的详细解析及其应用场景与实践
03-17
内容概要：本文深入介绍了Vuex插件在Vue项目中的具体实现和应用场景。首先明确了Vuex的概念——用于集中管理和存储Vue组件的状态数据，确保不同组件间能够高效、实时地共享数据，并解释了它与其他数据传输机制（如...
mpvue中配置vuex并持久化到本地Storage图文教程解析
11-26
本文将详述如何在MPVue项目中设置Vuex以及如何实现数据的持久化存储到本地Storage。 首先，让我们了解如何配置Vuex。在MPVue项目中，Vuex的配置过程分为以下三个步骤： 1. **创建store目录**： 遵循官方推荐的...
【Vue】实现 vuex 状态持久化
qq_45677671的博客
03-11 1156
vuex 实现状态持久化，面试高频
vue2中Vuex如何实现数据持久化
Input的博客
02-22 614
该插件实现原理是将vuex中的数据存储到本地浏览器的localStorage缓存中，当数据发生变化时，更新本地浏览器缓存。目的：为了解决在vue2中使用vuex时，每次刷新浏览器之后Store中的数据将会被重置。
vuex所有核心概念完整解析State Getters Mutations Actions
weixin_33739627的博客
06-03 199
vuex是解决vue组件和组件间相互通信而存在的，vuex理解起来稍微复杂，但一旦看懂则即为好用： 安装： npm install --save vuex 引入 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) vuex的几个参数的介绍 State 储存初始化数据 Getters...
Vuex数据持久化存储
前端程序猿的博客
04-03 852
Vuex作为Vue的状态管理工具，默认情况下数据存储在内存中，页面刷新或关闭会导致状态丢失。对于需要长期保存的数据（如用户登录状态、主题配置等），数据持久化是必要操作。本文介绍2种常用实现方案。在页面刷新前将vuex数据存储到sessionStorage。并非所有浏览器都支持上述。
如何实现持久化存储vuex
m0_65812066的博客
09-26 258
自己写localStorage.setItem等 需要一个个写, 很麻烦自己写localStorage.setItem等 需要一个个写, 很麻烦。刷新vuex的值会回归初始化, 如果在保存到vuex时, 它能自动保存到浏览器本地, 默认从浏览器本地取呢?这次再来重新登录, 查看浏览器调试工具vuex和浏览器本地存储位置, 是否自动同步进入。刷新网页看调试工具里vuex的默认值确实从本地取出了默认值, 保证了vuex的持久化。(配合vue2使用, 默认最新版是配合vue3使用)
在VUE2项目中使用vuex
m0_68654266的博客
02-20 879
vuex的使用
vue2持久化存储到本地
qq_64037242的博客
11-29 646
在Vue 2中，你可以使用Web Storage API（localStorage或sessionStorage）来实现持久化存储到本地。这样，即使在页面刷新或关闭后，用户输入的数据也可以被持久化保存，并且在下次访问时可以自动填充。钩子中从localStorage中获取存储的数据，并将其赋值给组件的。方法中将当前输入框中的值存储到localStorage中。当用户点击"Save Data"按钮时，我们在。在Vue组件中，你可以使用。在上面的示例中，我们在。
vue3的vuex使用
02-25
### Vue3 中 Vuex 的使用教程 #### 安装 Vuex 对于 Vue 3 应用程序，推荐安装最新版本的 Vuex。可以通过 npm 或者 yarn 来完成安装[^3]。 ```bash npm install vuex@next --save yarn add vuex@next --save ``` #### 创建 Store 实例 在 Vue 3 和 Vuex 结合使用的场景下，创建 store 实例的方式略有不同。下面是一个基本的例子来展示如何设置一个 Vuex store： ```javascript import { createStore } from &#39;vuex&#39; const store = createStore({ state () { return { count: 0 } }, mutations: { increment (state) { state.count++ } }, actions: { increment ({ commit }) { commit(&#39;increment&#39;) } } }) export default store; ``` 这段代码展示了如何初始化一个新的 Vuex store 并导出它以便可以在应用中使用[^1]。 #### 集成到 Vue 应用 为了让 Vuex store 能够被整个应用程序访问，在创建 Vue 实例时需要传递 `store` 参数给根组件选项对象： ```javascript import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; import store from &#39;./store&#39; // 假设上面的 store 文件位于 src/store.js createApp(App).use(store).mount(&#39;#app&#39;) ``` 这样做的目的是让所有的子组件都可以轻松地获取状态数据以及触发相应的操作。 #### 组件中的使用方式 当 Vuex 已经集成到了项目里之后，就可以很方便地读取全局状态或是提交变更请求了。比如在一个 `.vue` 单文件组件内部可以直接利用计算属性和方法来进行交互[^2]: ```html <template> <div class="example"> {{ count }} <button @click="increment">Increment</button> </div> </template> <script> export default { computed: { count() { return this.$store.state.count } }, methods: { increment() { this.$store.dispatch(&#39;increment&#39;) } } } </script> ``` 此部分介绍了如何在单文件组件中通过 `$store` 访问共享的数据源并执行相应的行为。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值