Javascript 在Nuxt/Vuex存储中定义用于API访问的setter和getter

我目前正在创建一个Nuxt应用程序，它使用API后端从中获取数据。因为我不知道加载页面时需要什么数据，所以我希望不要在

mounted（）

上获取数据，也不要在需要资源时显式获取数据，然后再访问它，而是在Nuxt/Vuex存储中定义getter和setter，以在数据存在时返回数据，或者在数据丢失时获取数据。 假设我有以下数据结构：
（projects.json）

[
{
“id”：1，
“随机数据”：“abc”，
“客户”：1
}
]

（clients.json）

[
{
“id”：1，
“名称”：“最大值”
}
]

我的页面看起来像这样：

{{project.randomdata}

展示客户

{{clients.find（c=>c.id==project.client）}

我尝试在多个地方注册Getter，但均未成功：

• 直接在

  computed

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

项目：{
get:（）=>{this.$store.dispatch（'get'，{resource:'projects'}）；返回此。$store.state.projects}
set：（value）=>this.$store.dispatch（'set'，{resource:'projects'，value}）
}

• 获得者，突变在商店；使用

  mapState

  ==>未在计算属性上同时配置getter和setter

getter：{
植物：州=>{
return get（注明“植物”，此为$axios）；
}
},
突变：{
植物（状态、价值）{
保存（“植物”、状态、植物、价值）；
},
},

• 处于

  状态的javascript getter/setter

  ==>无法获取axios，因此我可以按预期执行请求，这也是被动的吗

状态：（）=>({
_植物：{}，
获取植物（）{
返回获取（这是“植物”）；
},
设置植物（值）{
this.plants=保存（'plants'，this.\u plants，value）；
}
}),

假设存在适当的方法并按预期工作，则上述所有方法均适用

我假设从getter返回一个对象，异步请求完成后，将填充其属性

如果有人能为我指出正确的方向，告诉我如何正确定义这些getter和setter，我将不胜感激

---

TL；博士使用Nuxt/Vuex store为API请求定义getter和setter的最佳方法是什么？

首先要做的是将状态写入正确的位置。 我有一个设置文件夹，在state文件夹中有index.js文件

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

• 存储文件夹中的第一个

  index.js

  文件是主状态
• 存储/设置文件夹中的第二个

  index.js

  文件是具有设置状态的状态

现在，我有一个名为

options

的状态对象，它处于设置状态（在

store/setting/index.js

中）。就这样

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

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

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

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

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

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

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

它为我工作，我也在我的项目中使用它。 问我你是否不清楚