时间戳

首页 > 解决方案 > vuex中getter的特殊用途是什么？

javascript - vuex中getter的特殊用途是什么？

问题描述

学习vuex已经两周了。我只是想知道真正的特殊功能或用途是什么getters

我尝试了下面的代码，它工作正常。

this.$store.getters["app/url"]

但以同样的方式，我可以通过使用state

this.$store.state.app.url

我只是问，因为getters需要像下面这样的设置，并且当我们可以通过使用来获取值时它会延长代码state。

const getters = {
    url: state => state.url 
};

标签： javascriptvue.jsvuex

解决方案

我认为在三种情况下，getter 比仅使用 state 有一些优势：

  • 首先，getter 可以以比存储在内部状态中的格式更好的格式返回内部数据。通过将这种处理转移到您的 Vuex 存储中，您可以保持组件的清洁。例如，你可以有这样的东西：
// Normally we probably use setters here, but this is an example...
const state = {
  values: {
    2014: 1000,
    2015: 2000,
    2016: 3000,
    2017: 4000,
    2018: 5000,
    2019: 6000,
    2020: 7000
  },
  startYear: 2016,
  endYear: 2019
}

const getters = {
  // Returns something like [3000, 4000, 5000, 6000]
  currentValues (state) {
    const years = Object.keys(state.values);
    years.sort();

    return years
      .filter(year => year >= state.startYear && year <= state.endYear)
      .map(year => state.values[year]);
  }
}
  • 您可以更轻松地返回数据副本，而不是返回数据本身，从而防止您在不使用突变的情况下意外修改存储。通过使用 lodash deepClone 或Object.assign对于浅对象，您可以创建可以在组件中自由修改的副本，而无需在存储中执行任何操作。
const state = {
  values: {
    2014: 1000,
    2015: 2000,
    2016: 3000,
    2017: 4000,
    2018: 5000,
    2019: 6000,
    2020: 7000
  },
}

// In your component
const values = this.$store.state.values;
values[2021] = 8000;
// Wait, why is my store suddenly modified?!

// Instead, use a getter

import { cloneDeep } from 'lodash-es';

const getters = {
  values (state) {
    return cloneDeep(state.values);
  }
}

// In your component you can add 2021 without modifying the state and causing all kind of unintended/hard-to-debug side effects
  • Getter 允许您将 Vuex 存储的内部状态与使用它的组件分离。它基本上在组件和 Vuex 商店之间创建了一个契约，允许您修改 Vuex 商店的内部结构或修改您的组件，而无需同时接触商店和组件。这可能有助于使重构某些代码变得易于管理。虽然在设置初始 getter 时有一些样板，但您也可以创建一个帮助函数来为您生成这些 getter。如果由于某种原因您需要使 getter 比返回状态更复杂，您可以简单地将其从自动生成的 getter 中删除并编写自己的实现。否则，您必须追踪使用内部状态的任何地方。
function generateGetters(keys) {
  return keys.reduce((acc, key) => {
    acc[key] = (state) => state[key];

    return acc;
  }, {});
}

const getters = {
  ...generateGetters(['values', 'url', 'someOtherKey'])
}

推荐阅读