vuex中的getters

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>

• 运行结果