为API访问在Nuxt / Vuex存储中定义setter和getter
为API访问在Nuxt / Vuex存储中定义setter和getter
提问于 2021-04-05 19:25:57
我目前正在创建一个Nuxt应用程序，它使用API后端来获取它的数据。由于我不知道页面加载时需要什么数据，所以我希望避免在mounted()上获取数据，或者在需要资源时显式地获取资源，然后也访问它，而是在Nuxt/Vuex存储中定义getter和setter，以便在存在或丢失时返回数据。假设我有以下数据结构：
(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);
},
},- javascript getter/setter在
state==>中无法获得axios，因此我可以按预期执行请求，这是否是反应性的？
state: () => ({
_plants: {},
get plants() {
return get(this, 'plants');
},
set plants(value) {
this.plants = save('plants', this._plants, value);
}
}),以上所有假设存在适当的方法并按预期工作。
我假设一个对象从getter返回，其属性在异步请求完成后被填充。
如果有人能在正确的方向上正确地定义这些getter和setter，我就真的会这么做。
使用Nuxt/Vuex存储为API请求定义getter和setter的最佳方法是什么？
回答 1
Stack Overflow用户
发布于 2021-04-08 05:17:06
你必须做的第一件事是把你的状态写在正确的位置上。我在状态文件夹中设置了具有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
},
}在您的页面中，您可以构建这样的选项getter/setter ..。
export default {
data() {
return {}
},
computed: {
options: {
get() {
return this.$store.state.setting.options
},
set(value) {
this.$store.commit('setting/setOptions', value)
}
},
},
} 它为我工作，我也在我的项目中使用它。问我你是否不清楚。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66958650
复制相关文章
相似问题
腾讯云开发者
