黑马程序员技术交流社区

标题: 【广州前端】- Vuex的理解 [打印本页]

---

作者: 松野君    时间: 2018-11-15 10:59
标题: 【广州前端】- Vuex的理解
吹一波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')    },}

点击查看更多精彩前端资源

点击有惊喜

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2