在 Nuxt / Vuex 存储中定义 setter 和 getter 以进行 API 访问答案

【问题标题】：Defining setters and getters in Nuxt / Vuex store for API access在 Nuxt / Vuex 存储中定义 setter 和 getter 以进行 API 访问
【发布时间】：2021-07-01 15:32:03
【问题描述】：

我目前正在创建一个 Nuxt 应用程序，它使用 API 后端从中获取数据。因为我不知道页面加载时需要什么数据，所以我想避免在mounted() 上获取或在需要资源时显式获取，然后也访问它，而是在 Nuxt/ 中定义 getter 和 setter Vuex 存储返回数据（如果存在）或获取数据（如果缺失）。假设我有以下数据结构：
(projects.json)

[
  {
    "id": 1,
    "randomdata": "abc",
    "client": 1
  }
]

(clients.json)

[
  {
    "id": 1,
    "name": "Max"
  }
]

我的页面看起来像这样：

<template>
    <div
      v-for="project in projects">
      <p>
        {{project.randomdata}}
      </p>
      <v-checkbox
        v-bind="showClient">
        Show client
      </v-checkbox>
      <p
        v-if="showClient">
        {{ clients.find(c => c.id === project.client) }}
      </p>
    </div>
</template>

我尝试了多个地方来注册 getter，但均未成功：

直接在computed 中注册getter 和setter ==> 抛出“无法读取未定义的属性'$store'”，我猜这是未定义的

projects: {
  get: () => {this.$store.dispatch('get', {resource: 'projects'}); return this.$store.state.projects}
  set: (value) => this.$store.dispatch('set', {resource: 'projects', value})
}

getter，存储中的突变；使用 mapState ==> 没有在计算属性上同时配置 getter 和 setter

getters: {
    plants: state => {
        return get(state, 'plants', this.$axios);
    }
},
mutations: {
    plants(state, value) {
        save('plants', state.plants, value);
    },
},

state ==> 中的javascript getter / setter 无法获取axios，因此我可以按预期执行请求，这也是反应式的吗？

state: () => ({
    _plants: {},
    get plants() {
        return get(this, 'plants');
    },
    set plants(value) {
        this.plants = save('plants', this._plants, value);
    }
}),

以上所有假设存在适当的方法并按预期工作。

我假设从 getter 中返回一个对象，一旦异步请求完成，它的属性就会被填充。

如果有人能指出如何正确定义这些 getter 和 setter 的正确方向，我会非常感激。

TL;DR;使用 Nuxt/Vuex 存储为 API 请求定义 getter 和 setter 的最佳方式是什么？

【问题讨论】：

标签： javascript nuxt.js vuex nuxtjs

【解决方案1】：

你要做的第一件事就是在正确的位置写下你的状态。我在 state 文件夹中有 index.js 文件的设置文件夹。

store/
-------|index.js
-------|setting/
-----------| index.js

store 文件夹中的第一个index.js 文件是主要状态。
store/setting 文件夹中的第二个index.js 文件是具有设置状态的状态。

现在，我有一个名为options 的状态对象处于设置状态（在store/setting/index.js 中）。就这样……

export const state = () => ({
  options: {
    page: 1,
    itemsPerPage: 25
  }
})

export const mutations = {
  setOptions(state, options) {
    state.options = options
  },
}

现在在您的页面中，您可以像这样构建选项 getter/setter ...

export default {
  data() {
    return {}
  },
  computed: {
    options: {
      get() {
        return this.$store.state.setting.options
      },
      set(value) {
        this.$store.commit('setting/setOptions', value)
      }
    },
  },
}

它对我有用，我也在我的项目中使用它。问我是否不清楚。

【讨论】：