页面重载导致Vuex getter返回undefined
是因为在页面刷新时，Vuex的状态会被重置，而getter是基于状态的计算属性，因此在页面重载后，getter可能无法获取到正确的值，从而返回undefined。
为了解决这个问题，可以采取以下几种方法：
- 检查页面是否正确引入了Vuex：确保在页面中正确引入了Vuex，并且在Vue实例中注入了Vuex的store。
- 检查getter的使用方式：确保在组件中正确使用了getter。在组件中使用getter时，应该使用计算属性的方式来获取getter的值，而不是直接调用getter函数。
- 检查getter对应的状态是否存在：在getter中使用的状态必须在Vuex的store中存在，否则getter无法正确计算。可以通过在getter中使用if语句或默认值来处理状态不存在的情况。
- 检查页面重载时是否正确初始化了状态：在页面重载时，可以通过在Vue的created钩子函数中重新初始化状态，以确保getter能够正确计算。
- 使用持久化方案：可以考虑使用Vuex的插件或第三方库来实现状态的持久化，以避免页面重载导致状态丢失的问题。例如，可以使用vuex-persistedstate插件将状态保存到本地存储或cookie中。
总结： 页面重载导致Vuex getter返回undefined的问题可以通过检查Vuex的引入、getter的使用方式、状态的存在、状态的初始化以及使用持久化方案等方法来解决。在解决问题的过程中，可以根据具体情况选择合适的方法来处理。
相关·内容
这是我在这里设置和定义的全局状态和共享组件 export default {
getters: {
loading(state) {
return state.loading;
},
statusMessage(state) {
return state.statusMessage;
},
},
} 商店在此处导出共享模块 import Vue from 'vue'
import Vuex from 'vuex'
import shared from './shared/index.j
浏览 57提问于2021-04-24得票数 0
1回答
我在VUEX中有一个getter，我正在尝试过滤数组中的数组，但不断收到有关修改getter中的状态的警告。 错误: vuex不会在突变处理程序之外更改vuex存储状态 我知道我可以在顶层数组上做一个简单的过滤器，但它似乎不能在people数组上工作，我可以让它显示我想要的结果的唯一方法是执行以下操作(这是错误的) for (const company of company.companies) {
const filteredPeople: IPerson[] = company.people.filter(
x => x.jobId === 1
浏览 28提问于2020-12-11得票数 0
回答已采纳
我已经设置了vuex，我想稍后获取数据并更新我的表单模型，但这失败了
在我的vuex中
//state
const state = {
profile: [],
}
//getter
const getters = {
profileDetails: state => state.profile,
}
//the actions
const actions = {
getProfileDetails ({ commit }) {
axios.get('/my-profile-details')
浏览 2提问于2017-10-08得票数 0
1回答
我有一个拦截器，我想在其中使用Vuex getter，但是，当我导入我的store时，我收到了undefined。
下面是我的src/plugins/http.js代码：
import Vue from 'vue'
import store from '../store'
import axios from 'axios'
axios.interceptors.request.use(
(config) => {
if (store.getters['auth/hasAccessToken'])
浏览 6提问于2018-05-23得票数 2
我正在测试我的App.vue，而且我在getter上遇到了一个Vuex错误.我想它与一个糟糕定义的getters属性有关，但我不知道如何解决它。回赠欢迎
Console.log
ERROR LOG: '[vuex] unknown getter: getLists'
App.vue
✗ calls store action addShoppingList when a click event is fired from the plus-sign icon
AssertionError: expected false
浏览 4提问于2017-09-27得票数 1
回答已采纳
1回答
我试图(在课堂上)根据(课堂上)存储的内容设置数据属性。但我一直在找undefined。如何获得该值并将其设置为数据？
Classroom.vue:
data(){
return {
selectedOption: this.currentLesson
}
}
computed: Object.assign({},
mapGetters({
currentLesson: "lesson/current"
})
)
lesson.js:
const state = {
current: {}
}
const getters = {
cu
浏览 0提问于2018-08-06得票数 3
回答已采纳
3回答
Vuex存储有一个getter，它通过id返回对象。但我不能用数据采集器。
当我使用computed:在组件呈现之后数据来自getter，DOM仍然是空的(直到我没有点击vue devtools中的组件)。如果我单击，计算再次运行，元素被重新绘制并填充了data ()中的数据)
如果在数据()对象定义期间直接调用getter，则可以立即看到DOM中的{{ cardData.content }}，但this.cardData.title返回一个错误Cannot read property 'title' of undefined。为什么？
Vuex存储
export const
浏览 2提问于2017-01-11得票数 1
回答已采纳
我让我的组件与VUEX存储一起工作，但是在测试期间，我得到了以下错误：
● farewell/list.vue › renders all farewells
TypeError: this.allFarewellsAssociatedWithGreeting is not a function
下面发布了我的组件、测试和存储getter代码。
我更新了我的组件以使测试通过，但是实际的应用程序无法工作。更新存储时，组件不会呈现。这段代码也张贴在下面。
请让我知道，如果有什么其他我可以提供帮助故障排除。或者如果有任何步骤，我可以采取进一步的疑难解答。
谢谢你抽出时间帮助一位新手
这是我
浏览 3提问于2021-06-25得票数 0
回答已采纳
在根getter，vuex中不可用的模块getter。
嘿伙计们,
我有一个根状态的getter，这个getter需要引用模块(filter)中的另一个getter (getFilteredSpecialItems)。我知道rootGetters的存在。我可以在vue组件中引用filter/getFilteredSpecialItems，所以到目前为止还可以这样做。
根状态
const getters: {
getSortedList: (state, getters, rootState, rootGetters) {
...
console.log(getters)
浏览 0提问于2019-08-08得票数 1
回答已采纳
2回答
我遵循Vuex指南中的示例代码，得到了一个奇怪的结果(至少对我来说是这样)。
Vuex商店
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
name: ""
},
mutations: {
updateName(state, newName) {
state.name = newName;
}
},
getters: {
浏览 0提问于2018-09-27得票数 1
4回答
我使用的mapGetters助手来自VueX，但我有一些问题，只有在第一次加载页面，它不是反应.让我告诉你：
我的html模板触发了更改：
<input type="number" value="this.inputValue" @change="this.$store.dispatch('setInputValue', $event.target.value)">
我的商店收到了价值
{
state: {
appValues: {
inputValue: null
浏览 0提问于2019-07-11得票数 5
我正在Vue中开发一个调查构建器，用户创建的调查问题将提交到Vuex中，以便以后可以像这样检索：
computed: {
inputs() {
return this.$store.getters.questions(this.pageNumber);
},
},
pageNumber是组件接收的道具，inputs()返回一组问题。这一切似乎都可以在屏幕上呈现正确的问题，但我在Jest测试方面遇到了麻烦。
为了测试，我希望我可以像下面这样用getter模拟商店(省略了一些部分)：
const localVue = createLocalVue();
localVue.use(V
浏览 0提问于2018-08-28得票数 3
4回答
我按照教程建立了一个Vuex商店，其中包含使用TypeScript的模块。
到目前为止，我已经：
vuex/vuex.types.ts
export interface RootState {
version: string;
}
vuex/user-profile.ts
import { ActionTree, Module, MutationTree } from 'vuex';
import { RootState } from './types';
interface User {
firstName: string;
uid:
浏览 0提问于2018-10-17得票数 10
我几乎已经尝试了我能想到的所有方法，但我无法正确地挂载/浅挂载我的vue组件以进行正确的测试。每次我对包装器执行console.log操作时，我都会得到以下打印输出： VueWrapper {
isFunctionalComponent: undefined,
_emitted: [Object: null prototype] {},
_emittedByOrder: []
} 此问题与此处提出的问题类似： Vue-test-utils wrapper undefined 我用的是Vuetify，Vuex和Vue Router。我的test.spec.ts如下： import
浏览 53提问于2021-02-24得票数 0
回答已采纳
在我的项目中，vuex getter遇到了一些问题。我有一条显示所有用户的路线。当我访问该路由时，它将显示AllUsers.vue组件。
在这个组件中，我使用UsersList.vue组件，而在这个组件中，我使用了组件来显示用户详细信息。
我有一个从后端API获取所有用户数据的操作。然后我承诺突变来改变状态。我也在使用vuex模块。
VUEX行动：
async setUsers(context) {
const response = await axios.get(`/api/users`);
context.commit('setUsers', respons
浏览 4提问于2020-12-24得票数 0
2回答
我试图使用vuex中存储的数据来呈现d3图。但是我不会用renderGraph()函数获取数据。
如何在renderGraph()?中获取数据
以下是存储方法。
store/index.js
import Vue from "vue";
import Vuex from "vuex";
import * as d3 from "d3";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
subscribers: []
},
getters: {
浏览 2提问于2020-04-10得票数 0
回答已采纳
1回答
我正在设法为Vuex存储中的每个项添加一个计算属性(一个数组)。例如，在Todo列表应用程序中，每个Todo项都可能有DueDate和一个已完成的标志。基于这些属性，我们可以计算Todo项是否过期。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
Todos: []
},
mutations: { /* ... */ },
actions: {/* ...
浏览 2提问于2017-10-11得票数 1
回答已采纳
2回答
我有一个Vuex状态processState，它低于getter
export const getters = {
getProcessState: state => {
return state.processState;
}
我在两个不同的组件中观看这个getter，如下所示
<script>
import { mapGetters } from "vuex";
export default {
computed: {
...mapGetters("process/processStore", ["g
浏览 0提问于2020-04-02得票数 1
2回答
我正在使用Vue、Vuex和Vue-Vuex进行一个项目，但我在异步操作和组件的流程中遇到了很大的问题。
在我的主要组件中，我分配了一个操作来获取使用ajax的项目列表。
我的list组件接收来自这个getter的项目数组：
allProjects: state => state.projects
这很好，因为默认状态是空数组。我的问题是，当我想要路由project/:id时，如果已经加载了项目，那么它可以使用以下代码：
computed: {
project () {
return this.$store.state.fram.projects.find(ite
浏览 1提问于2017-09-19得票数 1
回答已采纳
1回答
我有一个文件，用来存储一个被“login”或“logout”函数更改的全局变量。我想编写一个单元测试，将'isLoggedIn‘的值设置为true或false，然后检查预期的行为。我不知道我需要做什么才能使用这个值，这是我的文件：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
loggedIn: false,
},
mutations: {
login(state
浏览 16提问于2021-06-09得票数 0
我正在将组件从普通的Vue 3组合API重构到脚本设置语法。起点：
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { mapGetters } from 'vuex';
export default defineComponent({
name: 'MyCoolBareComponent',
computed: {
...mapGetters('auth', ['isAdmi
浏览 6提问于2020-09-22得票数 9
回答已采纳
我在这里列出了一个最小的例子：
在src/MyComponent.vue内部，我想从被声明的计算方法中访问this.idx，但是它抛出了一个错误：
Cannot read property 'idx' of undefined
我不知道为什么this在那时没有定义，因为它是在其他计算属性中工作的。
main.js
import Vue from "vue";
import Vuex from "vuex";
// Import the `getField` getter and the `updateField`
// mutation fu
浏览 2提问于2019-04-05得票数 0
回答已采纳
在不同的场景中，我有数据要填充和更新。在这些场景中，我需要填充"href“和"href2”，只要我尝试按下面的代码所写的填充，我就会得到
Uncaught TypeError:无法读取未定义的属性“getter”-(尝试从getters)引用)
同样，当从兄弟级Vuex状态数据引用时，undefined的：无法读取属性“locationId”
这是我的Vuex商店的一个样本片段。
注意:我想做的这个参考/呼叫是在我的Vuex商店里的。
我需要帮助知道如何正确引用这些数据在Vuex商店。提前谢谢你。
export default new Vuex.Store({
state:
浏览 4提问于2021-03-02得票数 1
2回答
使用数组中的值初始化Vuex参数
、、、、
我有这段Vuex代码，我想将参数的默认值初始化为Vuex数组中的值。我该怎么做呢？
passcode: this.state.passcodes[0].value
它会导致一个错误，声明
Cannot read property 'state' of undefined
const store = new Vuex.Store({
state: {
passcodes: [
{
label: 'Pass1',
value: '123456',
},
{
浏览 0提问于2020-02-18得票数 1
我使用Nuxt、auth和VUEX状态来控制登录和注销过程。 在我登录后，VUEX状态已更新。但是页面上还是没有显示我的名字。只有在我刷新页面后，页面内容才会更新。我不知道为什么会这样。你能在这方面提供一些提示吗？ 页面刷新前： ? 页面刷新后： ? 下面是我的代码片段： ?
浏览 19提问于2020-03-24得票数 0
我在Vuex状态中有一个包含某些服务器细节的对象。它的状态、变异和增益都是这样的：
// Code inside store/index.js of the nuxt application
const state = () => ({
serverDetails: {}
})
const mutations = {
SERVER_DETAILS(state, value) {
Vue.set(state, 'serverDetails', value)
}
}
const getters = {
getServerDetails(state
浏览 0提问于2019-05-22得票数 0
5回答
vuexjs引起争论
、、、
有没有办法将参数传递给vuex store的getter？类似于：
new Vuex.Store({
getters: {
someMethod(arg){
// return data from store with query on args
}
}
})
所以在组件中我可以用
<template>
<div>
<p>{{someMethod(this.id)}}</p>
</div>
</template>
<script lang="
浏览 12提问于2017-01-06得票数 94
回答已采纳
我的商店里有：
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
campaigns: '',
currentCampaign: null
},
mutations: {
GET_CAMPAIGNS(state, campaigns) {
state.campaigns = campaigns
}
},
actions: {
浏览 0提问于2018-03-07得票数 0
我正试着制作一个产品细节页面。详细信息页名为_id。当打开时，id被替换为产品id。在打开页面时，使用从api获取的数据来设置状态。
之后，我尝试使用一个计算属性，该属性引用一个名为getProduct()的getter，其中包含一个id (this.$route.params.id)。
这就是我的_id.vue的样子：
methods: {
...mapActions("products", ["fetchProducts",]),
...mapGetters("products", ["getProduct",])
浏览 7提问于2021-12-13得票数 1
回答已采纳
我正在使用vuex (2.1.1)，并在vue单文件组件中工作。然而，为了避免在我的vue单文件组件中有太多的繁琐，我将一些函数移到了utils.js模块中，并将其导入到vue文件中。在这个utils.js中，我想读取vuex状态。我怎么才能做到这一点呢？看起来使用getter等方法来接近状态是不是假设你是从vue组件中工作的，或者不是？ 我尝试import state from '../store/modules/myvuexmodule'，然后引用state.mystateproperty，但它总是给出'undefined'，而在vue-devtools中
浏览 162提问于2017-01-08得票数 29
回答已采纳
1回答
我需要你的help.There是一个Vue应用程序，在那里我使用vuex商店和vue路由器。问题是，我从API调用中获得存储数据，如果我从其他地方导航到blabla/edit-profile页面，用户数据已经在存储中，在组件中，我可以使用getter接收到的数据。但是，如果我在create或挂载方法中重新加载页面getter，则不包含任何数据。但是如果查看Vuex工具，我可以看到获取的数据。我怎么才能纠正这种行为？
浏览 1提问于2018-09-25得票数 0
回答已采纳
目标：I希望查看一个vuex状态对象(MATCH_DATA)，以了解特定于道具(topicId)值的更改。所以，我想让观察者看MATCH_DATAtopicId。每当MATCH_DATAtopicId更新时，我都想调用一个函数(在这个早期的例子中，只记录它)。
但是，由于MATCH_DATA是一个getter，我如何将参数传递给它？vuex吸气器的设计似乎并不是为了接受参数。通过显式调用this.$store.state.etc.etc，我看到了一些例子。但是，是否有办法做到这一点，同时保留我目前的三个点符号？
或者，是否有更好的方法来实现这个目标，而不涉及一个vuex getter？
当前代
浏览 3提问于2021-09-13得票数 1
回答已采纳
我正在制作一个vue的帖子网站。这是我的问题：
有2页，一个为所有的博客，另一个在那里你可以查看博客。我和vuex一起工作。当我点击其中一个博客时，我会被发送到viewblog页面，看到正确博客的标题，所以没有问题。
我想做的事，似乎很简单。我想要一个具有两项内容的viewblog页面：(标题)和文本( text )。这两个应该来自商店 (vuex)。
这是目前的viewblog页面：
<template>
<div class="post">
<h1>{{ $route.params.title }}</h1>
浏览 0提问于2021-12-02得票数 1
回答已采纳
假设您有一个简单的应用程序组件，其中包含一个按钮，可以使用vuex商店从计数器组件添加多个计数器。
有点像.But中的基本计数器示例，您希望将vuex getter与通过组件上的属性传递的ID一起使用，您将如何做到这一点？
getter必须是一个纯函数，所以不能使用this.counterId。官方文档说您必须使用计算属性，但这似乎也不起作用。下面的代码为getter返回undefined：
import * as actions from './actions'
export default {
props: ['counterId'],
浏览 5提问于2016-07-18得票数 3
回答已采纳
import Vue from 'vue'
import Vuex from 'vuex'
import { createModule } from 'vuex-toast'
import 'vuex-toast/dist/vuex-toast.css'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
toast: createModule({
dismissInterval: 80000
}),
app: {
s
浏览 7提问于2017-09-01得票数 2
我有一些具有不同值的计算属性，我是否可以要求它来组织我的数据？
computed: {
totalCoin() {
const state = this.$store.state.ApiState.totalCoin
let val
if (state === 0) {
val = 0
} else if (state === null) {
val = undefined
} else {
val = state
}
return val
},
totalGem() {
const
浏览 1提问于2021-03-09得票数 2
回答已采纳
1回答
我试图使一个简单的项目，其中有2 Vue页面add.vue和read.vue。如果我们在add.vue中添加一条消息(使用提交来改变状态)，结果应该显示在使用Vuex存储的read.vue中。(我正在使用Nuxt)
store/index.js file=>
export const state = () => ({
messages:[]
})
export const mutations={
addMessage:(state, comment)=> {
state.messages.push(comment)
}
}
add.vue文件
<
浏览 0提问于2020-10-23得票数 0
我正在使用Nuxtv2.15和@nuxtjs/i18nv7.2构建一个web应用程序。我在用Vuex进行国家管理。在我的全局状态中，我希望创建一个基于this.$i18n.locale返回值的getter。
在我的Vuex方法中，访问带有$i18n的当前应用程序上下文的最佳方法是什么？
nuxt.config.js
export default {
modules: [
"@nuxtjs/i18n", // https://i18n.nuxtjs.org/
],
i18n: {
locales: { /* configuration */ },
浏览 19提问于2022-01-30得票数 2
Vuex抱怨说，如果不调用Vue.use(Vuex)，就无法创建存储的新实例。虽然这通常是可以接受的，但我正在修改使用同一个商店编写后端/前端的想法。有人知道答案吗？
谢谢。
浏览 1提问于2018-04-06得票数 9
回答已采纳
1回答
刷新页面后Vuex无法读取属性
、、、、
当我使用来自Vuex商店的值时，我有一个<code>D0</code>组件。在进入每条路径之前，我从vuex运行了如下命令：
<code>A1</code>
我的商店：
<code>A2</code>
此外，在我的<code>D3</code>组件中还包含以下内容：
<code>A4</code>
并像这样使用这个值：
<code>A5</code>
现在的问题是，当我打开使用这个<code>D6</code>的页面时，我的控制
浏览 6提问于2021-03-16得票数 1
我正在尝试从另一个模块的getter中的另一个命名空间的vuex模块访问状态，这就是我正在尝试的：
//GETTERS
const getters = {
authorizedAdminLinks: ({ rootState }) => _.filter(rootState.globals.adminLinks, link => link.seePrivilege >= rootState.globals.auth.privileges),
}
我得到以下错误：
[Vue warn]: Error in render: "TypeError: rootSt
浏览 0提问于2019-08-01得票数 0
我想使用v-for循环遍历一个对象数组。但是，我的状态返回一个包含对象数组的对象：
{ "todos": [ { "id": "x", "description": "y" }, { "id": "a", "description": "b" } ] }
这会导致v-for不起作用。如果我使用getter，它会返回对象数组，就像它应该返回的那样：
[ { "id": "x", "description":
浏览 1提问于2020-05-11得票数 2
2回答
我正在从Vuex商店检索数据。首先要检查Vuex中是否存在数组，然后检查索引0处的noProducts对象是否存在。
这样做的原因是，tweakwiseSortedProducts既用于产品，也用于前端的no products布尔值。
tweakwiseHasProducts () {
if (this.$store.state.tweakwise?.tweakwiseSortedProducts) {
return (
this.$store.state.tweakwise.tweakwiseSortedProducts[0].noProducts ===
浏览 10提问于2021-09-10得票数 0
回答已采纳
2回答
因此，每当vuex中的状态不为空时，我都会尝试从组件中更新一些数据。我用laravel设置了一个API routes，它在用户登录后返回用户信息。
API路由：
Route::group(['middleware' => ['auth:api']], function () {
Route::get('profil', 'Api\UserController@profil')->name('profile'); // will returning user info
}
Vuex：
export
浏览 10提问于2020-05-23得票数 0
回答已采纳
2回答
我在Vuejs是新来的，但我来自反应，只是尝试在这里使用Vuex。
我使用包含数组cart的状态构建了我的存储。
const state = () => ({
cart: []
})
我想要一个函数isInCart(product)，它可以返回产品是否在当前购物车中。
<span v-if="isInCart(product)">hello</span>
我应该使用我的商店的getter吗？
const getters = {
isInCart: (state) => (product) => state.cart.fi
浏览 3提问于2020-06-11得票数 0
2回答
Vuex在组分突变后获得状态
、、、、
我对国家管理层非常陌生，我被困在了一个职位上。任何帮助都将不胜感激。
我的商店设置如下：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default function() {
const Store = new Vuex.Store({
modules: {},
state: {
isAdmin: false,
},
mutations: {
changeAuthStatus(state, authStatus) {
浏览 3提问于2021-01-11得票数 2
回答已采纳
我正在编写一个Nuxt课程，我得到了下面的错误，当然，它在本教程中起作用。
TypeError: can't access property "dispatch", this.$store is undefined
存储/index.js文件：
import Vuex from "vuex";
const createStore = () => {
return new Vuex.Store({
state: { loadedPosts: [] },
mutations: {
setPosts(state, po
浏览 2提问于2022-05-18得票数 1
回答已采纳
1回答
这是我的表格：
<card-wrapper
v-for="(passenger, index) in form.passenger"
:key="index"
:icon="['fas', 'user']"
:title="`Passenger ${index + 1}`"
class="mb-5"
>
<validation-observer
:ref="
浏览 3提问于2020-03-17得票数 1
我尝试用VUEX getter返回过滤数组，但它发送给我以下内容
ƒ (region) {
return state.cities.filter(function (city) {
return city.region === region;
});
}
我不知道为什么会发生这种事，希望有人能帮助我。我的代码
VUEX:
getCities: state => region => {
return state.cities.filter(city => city.region === region);
}
App.vue
浏览 5提问于2021-03-26得票数 0
回答已采纳
1回答
Vuex更新数组作为对象的值
、、、、
在Vuex存储中，我遇到了在稍微嵌套的数据结构中更新数据的问题。
我的整个项目比下面的要复杂一些，但是我现在遇到的问题是简化和设置的，以便每个项目页面都有一个包含表可见性的登陆页面，以及单独的表组件，其中有一个Vuetify v-data-table元素，它只是将标题和项作为道具并显示出来。它可以形象化如下：
- Project Page
|- Landing page
|- Table Visibility
|- Table Component
|- v-data-table
一种思考方法是:对于每种动物(项目页面)，有三种不同的品种/类型，每种都有不
浏览 2提问于2019-02-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
