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

Posted 2023-03-16

【中文标题】在 Nuxt / Vuex 存储中定义 setter 和 getter 以进行 API 访问

【英文标题】：Defining setters and getters in Nuxt / Vuex store for API access

【发布时间】：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 的最佳方式是什么？

【参考方案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)
      
    ,
  ,
 

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