mutations vuex 调用_Vuex的使用详解（store state mutations）

最新推荐文章于 2024-06-20 08:12:56 发布
最新推荐文章于 2024-06-20 08:12:56 发布
阅读量658 收藏 1
点赞数 1
文章标签： mutations vuex 调用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31652625/article/details/112840077
版权

吹一波Vuex

Vuex真的是太好用了，在我真正了解他之前我感觉，哇，这个东西有那么多的属性和方法，看起来还差不多，我干嘛不用全局事件总线，或者是利用本地存储缓存这些数据呢？

Vuex太麻烦 我为什么不用其他方式代替vuex？

(开发移动App，如果是开发网页，可能造成一些数据泄露，导致数据不安全)

但是一旦有太多的状态要存储，localStorage啊 sessionStorage就显得很麻烦了，而且要在每一个改变他的地方都要重新存取。

一旦忘记清空或者逻辑复杂，或者页面跳转复杂，就会造成很大的bug。

学习Vuex

躲是躲不过去了，我决定尝试着学习他。

开始也跟着官网做了那个计数的东西，但是还是云里雾里。今天稍微得空，把自己手中的项目用vuex的那部分的代码仔细的看了一下，一下就有一点明白了。

趁热打铁，赶紧记录一下。

需求：

在进入练习册列表页面前，清空用户输入的用户密码缓存状态，选择练习册后要求用户输入密码，密码验证成功缓存登录状态，缓存当前选择的练习册的一系列信息(对象形式存储)，并且切换练习册无须再次输入密码。

Let's do it

如果要是用localStorage，需要缓存的东西就有很多了，而且不好管理状态。所以我们首先下载并引入vuex。

vuex的文件配置

在脚手架中的src文件夹下，先创建一个小的文件夹存放这个vuex，并且创建一个叫index.js的文件

文件目录结构

index.js 的文件中是引用vuex的一些配置文件，并且创建仓库，存储一些模块

index.js中文件的内容

modules的文件夹下面放一些不同的模块的文件

modules文件夹下的不同模块

modules 中文件的具体配置

state

state中就可以写一些我们要保存的状态啦~

我们在discover.js中创建一个state，然后将一些要存储的东西放到state这个对象中

state

那么如何去改变这些状态呢？

对~就是用mutations去改变store中state的状态。

mutations

我们在mutations中创建两个方法：

保存密码状态的方法

通过这个方法，使得在页面中获取到了lockCache(用户是否获取了访问权限的一个缓存状态)，然后存储到state中的lockCache中。

2.保存练习册信息的方法

原理同上

mutations

actions 和 getters 在这个案例中并没有用到，之后会补充这部分的内容。

export

暴露store中这些核心的东西

export

namespces: true的作用：

我们vuex中的store是分模块进行管理的，刚刚在store的index.js中引入了各个模块，为了解决不同模块命名冲突的问题，所以将不同模块的namespaced:true，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名。

其他模块也和这里是一样的这里就不一一进行说明了，只展示需求上的东西。

准备工作已经完成，现在就可以进行使用它了

进入练习册列表之前，我们要清空用户的登录状态，那么在这个页面我们就要引入我们的vuex咯

我们在这里使用了mapState mapMutations辅助函数

详情请去官网看为啥这么使用。

在script中引入这两个小机灵鬼

import { mapState,mapMutations } from '../../../node_modules/_vuex@3.0.1@vuex';

export default {

data() {

return {

key: '',

specialMode: false,

url: '',

}

},

computed: {

...mapState({

// 这里从store的state中获取这个lockCache

'lockCache': state => state.discover.lockCache,

}),

},

methods: {

...mapMutations({

这里调用保存状态的方法 让这个mutations中的方法给当前的saveLock这个方法

'saveLock': 'discover/SAVELOCKCACHE',

}),

toBooks() {

// 进入练习册列表的方法 这里强制的让store中的lockCache变成false 清掉用户的登录状态

this.saveLock({

lockCache: false

})

this.$router.push('/discover/book')

},

},

mounted() {

...

},

}

进入练习册列表

import {mapState, mapMutations} from 'vuex'

computed: {

...mapState({

'lockCache': state => state.discover.lockCache,

}),

},

methods: {

...mapMutations({

'saveLock': 'discover/SAVELOCKCACHE',

'saveBook': 'discover/SAVEBOOKINFO',

}),

toPage (val) {

// 去练习册内页的方法

if (this.isEdit) {

return

}

// this.saveLock({lockCache: false})

// this.updatePage({pageNum: 0})

// 保存点击的练习册的相关信息，方法和上述相同

this.saveBook({

gradeId: val.grade,

bookId: val.id,

name: val.name,

volume: val.grade * 2 - val.volume + 1,

textbookId: val.textbookId

})

this.$router.push('/discover/book/bookpage')

},

}

##下班~

抹茶奶盖大杯多冰
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex新手的理解与使用详解
10-16
- **Mapper**：在组件中，通常会使用mapMethods、mapGetters、mapState和mapActions等辅助函数，将Vuex的`actions`、`mutations`、`state`和`getters`映射到组件的`methods`和计算属性，简化组件与Vuex的交互。...
vuex的使用及持久化state的方式详解
11-28
Vue.js 应用程序在处理复杂状态管理时，常常会使用 Vuex 这一状态管理模式。Vuex 提供了一个中心化的存储来管理所有组件的状态，并通过规定确保状态变化的可预测性。下面，我们将深入探讨 Vuex 的核心概念以及如何...
Vuex中的Mutations的具体使用方法
11-20
在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合，这是Vuex 设计很重要的一点，就是把处理数据逻辑方法全部放在 mutations 里面，使得数据和视图分离。 Mutations使用 Vuex 中的 mutations 非常类似于事件，每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler)，也可以理解为{type:handler()}，这和订阅发布有点类似。先注册事件，当触发响应类型的时候调用handker()，调用type的时候需要用到store.commit方法。 示例
vuex中store 的mutation
qq_43203949的博客
12-27 4347
vuex中store 的mutation 1.mutation 官方解释mutation： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数 官方是建议我们通过mutation来实现更改store中的state的数据，而非在组件中直接使用s
Vuex Store全方位指南：从目录结构、模块化设计，到Modules、state、mutations、actions、getters核心概念最佳实践及全面测试策略
最新发布
JINGWHALE
06-20 421
本文全方位介绍了Vuex Store 安装，目录结构、模块化设计，Modules、state、mutations、actions、getters核心概念最佳实践，以及全面测试策略最佳实践与示例。Vuex Store是Vue.js框架的核心状态管理器，充当应用程序的中央数据存储，实现组件间状态的一致性和可追踪性。Vuex测试则至关重要，它不仅验证了状态管理逻辑的准确性，防止回归错误，还增强了代码的可维护性和团队协作效率，是提升应用健壮性和开发流程成熟度的基石。
Vuex理解使用；store封装；actions,mutations,state,getters使用；mapState,mapGetters,mapMutations,mapActions使用
艾米的猫儿的博客
11-17 1442
** 搭建vuex环境 ** 1.安装 npm i vuex 2. 引入store; import store from ‘你的存放路径’ 在new 中 写store使用store; 创建store的两种方式 src下创建store文件夹,新增一个index.js文件 编写index.js文件 创建三个对象分别是actions ,mutations,state // 引入vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ..
store中分模块，一个模块调用另一个模块的mutations
muzidanwu的博客
08-01 1102
后台管理系统动态路由里面遇到了登录之后页面显示空白，刷新一下，就正常了。差了好多资料，发现是退出登录的时候清除了user缓存，但是再次登录的时候缓存又赋值了。但是我判断动态路由是否重新加载是根据user判断的。所以在resetRouter()后，没有走重新设置路由的方法，直接next()了。后来把缓存里的router清除，重新给路由赋值，解决。第三个参数设置{roottrue}，注意是第三个参数！...
【Vuex入门】——（四）Mutation
mumuwei的博客
03-22 1712
一、Mutation的作用 更改 Vuex 的store 中的状态的唯一方法是提交 mutation。 Vuex 中的 mutation 非常类似于事件： 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 这个回调函数就是我们实际进行状态更改的函数，并且它会接受 state 作为第一个参数： const store = new Vuex.Store({ state: { count: 1 }, mutations:
在Vuex使用dispatch和commit来调用mutations的区别详解
10-18
在组件内部，我们可以使用`this.$store.commit('mutations方法名', 值)`来直接调用这些mutation。 **dispatch**： - `dispatch`是用来触发action的。与`commit`不同，action可以包含异步操作，比如API请求或者...
vue.js的状态管理vuex中store的使用详解
10-16
Vue.js的状态管理库Vuex提供了一种有序的方式来管理和共享组件之间的状态。...以上就是关于Vue.js的状态管理Vuex中Store的使用详解。通过合理利用这些核心概念，你可以构建出更加可控和易于调试的大型Vue应用。
vuex(store) 之 mutations详解， 及store中的state是响应式的条件
qq_46302247的博客
05-31 3061
1、mutations的提交风格 // @/store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { counter: 10 }, getters: { }, mutations: { addCounter(state,counter) { console.log(counter,'
Vuex之理解Mutations的用法实例
08-30
本篇文章主要介绍了Vuex之理解Mutations的用法实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vuex &store,mutations,getters,actions
AYBBZXY的博客
01-29 999
目标：明确vuex是什么，应用场景，优势vuex是一个vue的状态管理工具，状态就是数据大白话：vuex是一个插件，可以帮我们管理vue通用的数据（多组件共享数据）①某个状态在很多个组件来使用（个人信息）②多个组件共同维护一份数据（购物车）①共同维护一份数据，数据集中化管理②响应式变化③操作简捷（vuex提供了一些辅助函数）
Vuex实践（中）-多module中的state、mutations、actions和getters
盏茶作酒的博客
07-22 1475
一.前言 　　上一篇文章《Vuex入门实践（上）》，我们一共实践了vuex的这些内容： 　　1.在state中定义共享属性，在组件中可使用[$store.state.属性名]访问共享属性 　　2.在mutations可中定义修改共享数据的方法，在组件中可使用[$store.commit('方法名')]同步修改共享属性 　　3.在actions中可定义异步修改共享数据的方法，在组件中可使用[$store.dispatch('方法名')]异步修改共享属性 　　4.在getters中可定义共享数据的计算
vuex store的使用
热门推荐
炒饭的博客
08-07 1万+
一、状态管理（vuex）简介 vuex是专为vue.js应用程序开发的状态管理模式。它采用集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。vuex也集成刀vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。 二、状态管理核心 状态管理有5个核心，分别是sta...
Mutations理解
407指导员
01-25 422
Mutations理解 Mutations状态跟新 mutations: { //方法,默认就有一个参数是state increment(state) { state.counter++ }, decrement(state) { state.counter-- } }, 上边的increment和decrement就是字符串的事件类型 后边的紧跟函数就是回调函数,默认state为第一个参数 Mutations参数传递 addCount(count) { t
(vuex)mutations
vvvvvlj
08-01 144
Vuex的store状态的更新唯一方式：提交Mutation mutations主要包括： 字符串的事件类型(type) 一个回调函数，该回调函数的第一个参数就是state 在通过mutation更新数据的时候，有可能希望携带一些额外的参数，参数被称为是mutation的payload 但是如果参数不是一个的话。通常让payload以对象的形式传递 vue <template> <div id="app"> <h2>{{$store.state.cou
Vue 2
GQDD99的博客
12-23 364
vue2/3笔记
Vuex.Store里mutations和actions的区别，并实现异步加载的延时计数器
泡泡的博客
05-10 2239
Vuex.Store里mutations和actions的区别，并实现异步加载的延时计数器前言先上代码在说话解析运行代码异步加载延时计数器 前言 mutations和actions都是Vuex.Store里定义函数的方法 mutations定义的函数的参数都有一个state，表示store里的整个state数据，同步加载 actions定义的函数里的参数是content，代表整个store对象，用于异步加载 先上代码在说话 便于比较，我把mutations和actions写到了一起 <!DOCTYPE
Vuex.Store中的state和mutations
06-07
在Vuex.Store中，state是用来存储数据的对象，mutations是用来修改state中数据的方法。state中的数据可以被组件通过this.$store.state来访问，而mutations中的方法可以被组件通过this.$store.commit来调用。下面是state和mutations的详细介绍： 1. state state是Vuex.Store中用来存储数据的对象，它包含了应用程序中所有需要管理的状态。state中的数据可以被组件通过this.$store.state来访问。例如，你可以在Vuex.Store中定义一个名为`count`的state，代码如下： ```javascript const store = new Vuex.Store({ state: { count: 0 } }) ``` 在这个例子中，我们在state中定义了一个名为`count`的变量，初始值为0。组件可以通过`this.$store.state.count`来访问这个变量。 2. mutations mutations是Vuex.Store中用来修改state中数据的方法，它们必须是同步函数。mutations中的方法可以被组件通过`this.$store.commit`来调用。例如，你可以在Vuex.Store中定义一个名为`increment`的mutation，代码如下： ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } } }) ``` 在这个例子中，我们定义了一个名为`increment`的mutation，它将state中的`count`变量加1。组件可以通过`this.$store.commit('increment')`来调用这个mutation。 mutations中的方法也可以接收额外的参数，例如： ```javascript const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, amount) { state.count += amount } } }) ``` 在这个例子中，我们定义了一个名为`increment`的mutation，它将state中的`count`变量加上额外的`amount`参数。组件可以通过`this.$store.commit('increment', 10)`来调用这个mutation，将`amount`参数设置为10。 mutations中的方法还可以被异步调用，但是异步操作不能直接修改state中的数据。如果需要在异步操作中修改state中的数据，可以使用actions来实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值