Vuex的理解

小黑哎代码
114 阅读3分钟
吹一波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') },}

更多技术资讯可关注：gzitcast


avatar
文章
阅读
粉丝