在 vuex 的官网 https://vuex.vuejs.org 中, 提到的核心概念一共有 5 个, 分别是 State,Getter,Mutation,Action 和 Module, 在上一篇随笔中, 我们主要用到其中的 State 和 Mutation, 接下来, 我们来分析剩下几个使用方法, 在这里, 是在上一篇的基础上面完成的.
这是上一篇结束时实现的功能, 现在接着这个项目继续分析.
Getter
在官网中对 getter 的定义是: 就像计算属性一样, getter 的返回值会根据它的依赖被缓存起来, 且只有当它的依赖值发生了改变才会被重新计算. 也就是说, 只有改变 state 里面的 count 数据的时候会触发 getters 里面的方法 获取新的值. 例如, 现在希望每次改变 count 的时候, 它都能变为当前的两倍, 可以这样做:
1, 定义方法
2, 暴露
3, 使用
当点击增加按钮后, 触发了 mutations, 实现了自增, 所以前面一个数字变为了 2, 数据出现自增后, 说明数据发生了改变, 一旦数据改变, 就会触发 getter 里面的方法, 对数据实现乘以 2, 所以后面一个数就变为了 4.
Action
官网中对于 action 的定义是: 类似于 mutation, 不同在于 action 提交的是 mutation, 而不是直接变更状态; action 可以包含任何异步操作. 下面还是使用例子要演示.
首先是要在 store.JS 中定义并暴露,
因为上面已经说过了, action 提交的是 mutation, 而不是直接变更状态, 所以这里的方法里面写入的就是在 mutations 中定义的方法.
我们在 Home.vue 中使用, 在使用的时候需要注意的是, 前面是通过事件触发 mutations 里面的自曾方法, 现在需要改变这种方法, 使用 action 里的方法了, 如下:
实现的效果和上面是一样的.
综合使用
最后通过一个案例来总结 vuex, 在这个案例中, 会使用到数据请求, 所以要先安装 vue-resource
然后在 main.JS 中引入
在 News.vue 文件中请求并渲染数据.
然后再运行项目, 我们会发现, 每次点击新闻页面的时候, 都会重新请求数据.
多次重复请求并不是友好的操作, 所以, 接下来就需要用 vuex 来实现数据持久化了,
1, 在 store.JS 中定义一个数组存储新闻数据.
2, 在 mutations 中定义一个添加数据的方法.
3, 在请求数据的时候, 将请求的数据存储到 state 里面中, 所以要触发 mutations 中的添加方法.
4, 在页面渲染的时候, 先从 state 里面获取数据, 对获取的数据进行判断, 如果有数据不为空, 即直接进行渲染, 如果数据为空则进行上一步的数据请求操作. 这样就可以避免多次重复请求数据了.
完整代码下载: 点这里 https://pan.baidu.com/s/1NkjkL5ykha3RZNMMjCWiDg
来源: http://www.bubuko.com/infodetail-2823765.html