vuex中的getters
简介
本文讲解vuex里面的getters的用法。
这里是vue官方对其的介绍。
我们现在通过下面一个例子进行知识点的引入，在下面这个页面中，我定义了一个方法，用来把时间规范化，这个方法其实就是getters需要做的事儿，就是用来计算属性的。
<template> <div class="about"> <h1>This is an about page</h1> {{ oldDate }} <hr> {{ newGetDate(convertedDate) }} </div> </template> <script> export default { data () { return { oldDate: 1584983115491 } }, computed: { convertedDate () { // 定义一个计算属性，返回旧的日期时间戳 return this.oldDate }, newGetDate () { // 将 date 参数作为一个参数传递给 newGetDate(), 使用函数的方式来实现注入。 // 将转换后的日期格式化成指定的字符串形式, 用 replace 替换去除中文日期中不需要的字符 return function (date) { const dateString = new Date(date).toLocaleString() return dateString.replace(/年|月/g, '-').replace(/日/g, ' ') } } } } </script>
运行结果
mapGetters 辅助函数
首先创建getters.js文件内容如下
- getters.js
export default { setStr (state) { return state.str.slice(0, 2) }, newGetDate () { // 将 date 参数作为一个参数传递给 newGetDate(), 使用函数的方式来实现注入。 // 将转换后的日期格式化成指定的字符串形式, 用 replace 替换去除中文日期中不需要的字符 return function (date) { const dateString = new Date(date).toLocaleString() return dateString.replace(/年|月/g, '-').replace(/日/g, ' ') } } }
- index.js
import { createStore } from 'vuex' import state from './state' import getters from './getters' export default createStore({ state, getters, mutations: { SET_ONLINE_STATUS (state, status) { state.onlineStatus = status }, SET_THEME_COLOR (state, color) { state.themeColor = color } } })
- state.js
export default { onlineStatus: false, themeColor: 'blue', str: '这是一个字符串' }
- AboutView.vue
<template> <div class="about"> <h1>This is an about page</h1> {{ oldDate }} <hr> {{ newGetDate(oldDate) }} <hr> {{ setStr }} </div> </template> <script> import { mapGetters, mapState } from 'vuex' export default { data () { return { oldDate: 1584983115491 } }, computed: { ...mapState(['str']), ...mapGetters(['setStr']), ...mapGetters(['newGetDate']) } } </script>
- 运行结果
