vuex中的getters

矫情吗；* 2024-03-16 13:41 13阅读 0赞

## vuex中的getters ##

### 简介 ###

本文讲解vuex里面的getters的用法。

这里是vue官方对其的介绍。  
![在这里插入图片描述][8e5a5af97f4e486d8b36222340ef7850.png]  
我们现在通过下面一个例子进行知识点的引入，在下面这个页面中，我定义了一个方法，用来把时间规范化，这个方法其实就是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>

运行结果  
![在这里插入图片描述][9ae1008842a44f3a8b3c544af031615f.png]

### 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, ' ')
        }
      }
    }

![在这里插入图片描述][1d6c4cdaec6b461daff5b574dd10ace5.png]

*  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
        }
      }
    })

![在这里插入图片描述][f8edd8d69b6f42b0963966cd42507cf9.png]

*  state.js

export default {
        
      onlineStatus: false,
      themeColor: 'blue',
      str: '这是一个字符串'
    }

![在这里插入图片描述][42d73c54dc2f43b690817f34cdec9dac.png]

*  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>

![在这里插入图片描述][37503927e40a4378a585099b38d3a6c7.png]

*  运行结果  
    ![在这里插入图片描述][b7ae4834d98c47a899af4fc1fa5e9f14.png]

[8e5a5af97f4e486d8b36222340ef7850.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/ef0f88674f954d68a7cfb43edfa643ef.png
[9ae1008842a44f3a8b3c544af031615f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/abdb838f5c04463cb03373da0a8d4ca3.png
[1d6c4cdaec6b461daff5b574dd10ace5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/590ddb08e989403f8cb25da9ebd9781b.png
[f8edd8d69b6f42b0963966cd42507cf9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/563846ea549a46d6a1dd7fb086470b20.png
[42d73c54dc2f43b690817f34cdec9dac.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/1588cd4afaa7486a82b58d6a2e28a75a.png
[37503927e40a4378a585099b38d3a6c7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/aba1fe1a33da4018a3b6761778a0db7a.png
[b7ae4834d98c47a899af4fc1fa5e9f14.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/5b4f53020f964797b4dab7c9852664f2.png