mutations vuex 调用_Vuex的使用详解（store state mutations）
吹一波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')
},
}
##下班~
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！