Vuex同步:无法读取未定义的属性
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它可以帮助我们在应用程序中集中管理和共享状态，使得状态的变化可预测且易于调试。
在Vuex中，当我们尝试读取一个未定义的属性时，会出现同步错误。这通常是因为我们在组件中访问了一个不存在的状态属性或者没有正确地在Vuex store中初始化该属性。
为了解决这个问题，我们可以按照以下步骤进行操作：
- 确保在Vuex store中正确地定义了该属性。在store的state对象中添加对应的属性，并初始化为一个合适的值。
- 在组件中使用
mapState辅助函数或者直接通过this.$store.state来访问该属性。确保属性名的拼写和大小写与Vuex store中的定义一致。 - 如果该属性是通过异步操作进行更新的，可以考虑使用
getters来获取该属性的值。在Vuex store中定义一个对应的getter函数，然后在组件中使用mapGetters辅助函数或者通过this.$store.getters来获取该属性的值。 - 如果以上步骤都没有解决问题，可以检查组件中是否存在其他错误导致无法正确访问该属性。例如，组件的生命周期钩子函数中可能存在错误的逻辑，导致属性未被正确初始化。
总结起来，当出现Vuex同步错误"无法读取未定义的属性"时，我们需要确保在Vuex store中正确定义了该属性，并在组件中正确地访问该属性。如果属性是通过异步操作进行更新的，可以考虑使用getters来获取该属性的值。如果问题仍然存在，需要检查组件中是否存在其他错误导致无法正确访问该属性。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain
相关·内容
2回答
我需要升级项目从vue 2到vue3，我正在使用coreui模板。我升级了vue，vuex，vue-路由器。但是，当我为该项目服务时，它会在控制台中显示以下错误。
Uncaught (承诺中) TypeError:无法读取未定义的属性“_c”
终端没有错误。我已经用vue3语法更新了所有路由器，vuex，vue。
谢谢你的帮助
浏览 3提问于2020-11-25得票数 5
无法读取未定义(读取“use”) vuex的属性
import Vue from 'vue'
import Vuex from 'vuex'
import post from './modules/post'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
post
}
})
浏览 10提问于2022-05-07得票数 0
我正在用VueJS构建一个应用程序，但是Vuex模块给我带来了一些问题。
无论我尝试什么，在从另一个模块调用它时，我都无法检索模块中的状态。
在我的Vue Devtools Vuex getter中: modA/mycustomer:是未定义的
我已经阅读了Vuex网站上的所有文档，并尝试了一些已经在堆栈溢出中给出的解决方案，但是我迷路了。可能忽略了什么
我的store.js
export default new Vuex.Store({
modules: {
modA: moduleA,
modB: moduleB
}
})
moduleA J
浏览 0提问于2019-04-14得票数 5
回答已采纳
我使用Vuex属性从父组件传递一个参数。但是，在加载组件时，Vuex属性仍然是undefined，生成以下错误消息：
Vue警告:呈现错误："TypeError:无法读取未定义的属性'0‘“
我是这样路过的：
<card
:image="$store.state.company.card_img[0].url"
></card>
它可以正常工作，但我想知道如何正确地执行它以避免错误消息。
浏览 0提问于2018-05-13得票数 0
回答已采纳
我有可能实现vuex --这是我的代码: laravel/resources/assets/js/app.js
import router from './routes.js';
import store from './store.js'
require('./bootstrap');
router.beforeEach((to,from,next) => {
if(to.matched.some(record => record.meta.requiresAuth)){
const authUser =
浏览 1提问于2017-03-17得票数 1
我目前正在使用Vuex和VueJS，我陷入了计算属性的问题中。
简而言之，我有--一个在Vuex状态下具有内部对象的对象，尝试访问Vuex中的内部对象的键以返回值，并在组件中呈现它。但是，我得到一个类似于“无法读取未定义的属性id”的错误。
我认为这个问题有两点是重要的。
第一种方法是，如果我使用settimeout()方法将该值放入装入()中的数据选项的变量中，则可以呈现该值。
第二点是，我可以访问对象的一个键，返回Vuex getter中的值，并在组件中正确地呈现它。
我想知道是否可以在Vuex getter中返回包装对象中的对象的值，以便在挂载组件之前呈现它。
如果你能回答我的问题就太好
浏览 1提问于2020-07-01得票数 0
3回答
目前我使用的是Vue CLI version^3.0.0和Vuex^3.6.0，但是当我想使用Vue.use( Vuex )时。它说在浏览器中不能读取未定义的使用。
代码：
main.js
import App from './App.vue'
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app')
Store.js：
import Vue from 'vue';
import Vuex from
浏览 37提问于2021-02-16得票数 0
回答已采纳
我正在尝试学习vuex，在youtube上为vuex学习教程，我遇到了TypeError的一个错误:无法读取未定义的(读'state')的属性，在这里我无法弄清楚为什么会有这个错误，我想可能是因为更新的版本不确定。这是我的代码: TodoList.vue
<template>
<div>
<h4>Todo list</h4>
<todo
v-for="(task, index) in $store.state.todos" // getting error here
浏览 2提问于2022-02-04得票数 0
我试图设置一个单元测试如下：
import Vue from 'vue'
import ChangeTitleComponent from '@/components/ChangeTitleComponent'
import store from '@/vuex/store'
describe('ChangeTitleComponent.vue', () => {
describe('changeTitle', () => {
var com
浏览 2提问于2017-09-17得票数 0
回答已采纳
7回答
就像在main.js中一样，我试图从一个助手函数文件中访问我的商店：
import store from '../store'
let auth = store.getters.config.urls.auth
但是它记录了一个错误：
未定义的TypeError:无法读取未定义的属性“getter”。
我试过了
this.$store.getters.config.urls.auth
同样的结果。
商店：
//Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex
浏览 6提问于2017-12-14得票数 49
回答已采纳
1回答
我有一个非常简单的VueJS示例，我遇到了一些问题。
我有一个名为enums.js的js文件，其中包含以下行
export const modeEnumeration = { PLAYBACK: 'playback', RECORDING: 'recording', NONE: 'none' };
我想将Vuex状态下的属性的初始值设置为这些modeEnumeration值之一。这是我的Vuex商店。
import Vue from 'vue';
import Vuex from 'vuex';
import mo
浏览 2提问于2020-05-06得票数 0
回答已采纳
2回答
我第一次尝试类星体，并尝试在模块中使用Vuex，但是我不能访问$store属性，也不能使用...mapState。我得到了以下错误“无法读取未定义的属性”日志“，尽管我可以看到Vue Devtools上存在承诺日志。
这是我的store\index.js
import Vue from 'vue';
import Vuex from 'vuex';
import logbook from './logbook';
Vue.use(Vuex);
export default function (/* { ssrContext } */) {
浏览 1提问于2019-10-08得票数 2
1回答
当我试图加载页面时，它显示了错误"TypeError:无法读取未定义的属性‘状态’“。根据文档，我试过这辆没有装载的巴士。
<template>
<div>
</div>
</template>
<script>
import { store } from '@/components/tenant/store/store'
import Vue from 'vue'
export default {
store:store,
data: () => {
return {
}
}
浏览 1提问于2018-10-10得票数 0
回答已采纳
1回答
我有一个Loader组件，在其中它将基于
created() {
this.$root.$on('show-loading', (vars) => {
this.loading = vars;
console.log('loader executed');
});
},
目前，通过vue组件，我可以通过show-loading执行this.$root.$emit('show-loading', true);。
但是，我现在正试图从vuex模块文件中执行代码。我得到了一个错误
TypeErro
浏览 2提问于2020-07-03得票数 1
回答已采纳
我正在写vuex，我喜欢解构语法，但是下面的语法有一个错误。析构变量未定义，正常变量输出良好。原因何在？
[GET_BUSINESS_INFO]: async ({ commit, rootState }) => {
const { user: { firstBranchId = '' } = {} } = rootState || {};
console.log('GET_BUSINESS_INFO', rootState.user.firstBranchId);
// undefined
console.log('GET_BU
浏览 0提问于2021-03-26得票数 1
组件本身在页面上工作，没有错误。
故事书也是如此，唯一的问题是单元测试。
import { mount } from '../../vue';
import { createLocalVue } from '@vue/test-utils';
import Vuex from 'vuex';
import SessionGymChart from '@/components/SessionGymChart.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
浏览 1提问于2022-09-02得票数 0
我的商店/index.js是：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default
new Vuex.Store({
state: {
name: 'Alicia Vikander',
age: 20,
dob: '20/08/1990'
},
mutations: {
updateName(state, name) => {
state.name = name
}
浏览 0提问于2018-08-28得票数 3
我的代码库里有这个组件，
<template>
<v-dialog v-model="modalVisible" content-class="muc-modal" max-width="350" persistent>
<v-card>
<component :is="component"/>
</v-card>
</v-dialog>
</template>
&
浏览 4提问于2020-12-17得票数 1
1回答
如何在vuex中显示存储的值
、、、、
我把数据存储在Vuex商店。以下是它的外观：
基本上，我想在视图中显示first_name。所以我返回了这样的数据：
data () {
return {
first_name: this.$store.state.user.attributes.first_name,
}
},
Ans很容易地希望在div中显示它：
<div>{{first_name}}</div>
但我正在获取vue.esm.js:1906 TypeError:无法读取未定义(读取'first_name')的属
浏览 8提问于2022-02-11得票数 0
2回答
在我的store中，我需要同时拥有当前周(常量)和最初等于当前周的变量，这些变量可能会因突变而改变：
export default new Vuex.Store({
state: {
thisWeek: moment().startOf('isoWeek'),
currentWeek: thisWeek
}
});
我得到了
未定义thisWeek
但如何解决这个问题呢？
(奖金:在Vuex中没有区分变量和常量的方法吗？)
浏览 2提问于2018-09-25得票数 1
回答已采纳
我正在动态注册vuex存储模块。
store.registerModule('home.grid', GridStore)
然后在组件中：
export default {
name: 'GridComponent',
props: {
namespace: {
type: String,
required: true
},
computed: {
...mapState(this.namespace, ['filter']) // doesn't work
filter() { // mor
浏览 1提问于2019-04-30得票数 3
回答已采纳
1回答
我正在尝试以vuex存储状态保存我的输入域消息。我对此有问题。我做错了什么？
<div class="app_right-bot">
<form @v-on:submit.prevent="storeMessage">
<input type="text" id="msg" name="msg" v-model="message">
</form>
</div>
data() {
浏览 0提问于2020-10-11得票数 0
你好，我有一个关于虚拟时刻的问题。如何在每个组件中使用这个。当我不能在Vuex上使用它的时候，$ when？当我试图使国家，如转制，再转换，自愿
export default new Vuex.Store({
moment : this.$moment
)}
我得到错误TypeError：
无法读取未定义的属性“$moment”
浏览 1提问于2019-10-21得票数 0
在我从组件的脚本中得到电影细节之前。该函数首先检查存储区的电影ID是否与路由的param电影ID相同，如果相同，则不要从服务器API获取电影，或者从服务器API获取电影。
一切都很顺利。但现在我正试图从商店的突变中得到电影的细节。不管怎么说我都错了
未定义的TypeError:无法读取未定义的属性“$route”
如何使用vue- ($route)访问params和从vuex存储中的服务器API获取的vue资源($http)？
store.js：
export default new Vuex.Store({
state: {
movieDetail: {},
浏览 11提问于2017-03-02得票数 12
回答已采纳
在不同的场景中，我有数据要填充和更新。在这些场景中，我需要填充"href“和"href2”，只要我尝试按下面的代码所写的填充，我就会得到
Uncaught TypeError:无法读取未定义的属性“getter”-(尝试从getters)引用)
同样，当从兄弟级Vuex状态数据引用时，undefined的：无法读取属性“locationId”
这是我的Vuex商店的一个样本片段。
注意:我想做的这个参考/呼叫是在我的Vuex商店里的。
我需要帮助知道如何正确引用这些数据在Vuex商店。提前谢谢你。
export default new Vuex.Store({
state:
浏览 4提问于2021-03-02得票数 1
我目前还在学习vue 2和vuex，现在我正在测试如何使用axios从API中设置初始状态。根据我的理解，初始状态始终是一个空对象，但是使用组件上的前挂载选项来执行initState操作和startState突变，可以用API响应数据来更改状态，对吗？但是由于某种原因，我的代码中的mapGetter返回未定义的。再说一遍，我还在学习，所以可能是我犯了一个愚蠢的错误，使代码不起作用。因此，任何投入都将不胜感激！
下面是我的代码：
TodoModule.js
import axios from "axios";
const state = {};
const g
浏览 2提问于2022-08-15得票数 0
我尝试用axios获取数据，获取来自vuex存储的参数。问题是我得到了未定义的参数在商店里
data() {
return {
payments: [],
destinations: [],
};
},
computed: {
codcli() {
return this.$store.getters.codcli;
},
total() {
return this.$store.getters.orderTotal;
}
},
methods: {
setDat
浏览 1提问于2019-04-02得票数 1
回答已采纳
1回答
我已经模块化了我的Vuex存储，并且需要子组件能够访问数据/使用与它们的父组件相同的存储。
以下是我尝试过的：
<!-- ParentOne.vue -->
<template>
<div>
<child-component
vuex-store="services/opportunities"
/>
</div>
</template>
<script>
import ChildComponent from '@/components/services/child-c
浏览 3提问于2020-10-09得票数 0
2回答
我试图使用vuex作为防火墙和我的vue应用程序之间的一层。我的vuex店看起来是这样的：
const store = new Vuex.Store({
state: {
posts: [],
},
mutations: {
add_post(state, post) {
state.posts[post.id] = post;
},
},
actions: {
async load_post(context, id) {
let post
浏览 0提问于2019-06-03得票数 0
回答已采纳
2回答
Uncaught :不能使用' in‘操作符在未定义的中搜索’用户‘我不能理解这一行：use 'in' operator to search for 'USERS'，还有为什么是undefined？
我不明白这些错误，请向我解释。
My ：
export default new Vuex.Store({
state: {
users: []
},
actions: {
GET_USERS_FROM_API({commit}) {
return axios('http://localhost:3000/
浏览 5提问于2021-01-11得票数 3
对于api_token的vue-axios auth，我使用帮助文件api.js。
我收到错误-未捕获TypeError:无法读取未定义的属性'getters‘。
我认为Vuex helper没有看到全局存储--Vuex $store。
在其他组件我不需要进口Vuex存储，他可以在任何地方的应用程序。
如何在helper中使用这个.$storage？
//api.js
import axios from 'axios'
let api_token = this.$store.getters.get_api_token //got error!
export f
浏览 7提问于2017-07-02得票数 12
2回答
我用的是Vue，Vuetify，Vue-Router和Vuex的项目。其目的是在更模块化的方法中创建一个带有侧栏的基本布局，以便使用Vue实现可伸缩性。所以我创建了一个名为Store的文件夹，其中有一个模块文件夹。因此，存储文件夹中的索引文件如下所示：
import Vue from 'vue';
import Vuex from 'vuex';
import global from './Modules/Global';
Vue.use(Vuex);
export default new Vuex.Store({
modules:
浏览 3提问于2018-03-01得票数 1
回答已采纳
我在试着用vux和vuetify学习vue。我是通过vue cli安装的。 就像在文档中一样，我试图访问存储，但得到了一个未定义的.$storage。 src/components/HelloWorld.vue <script>
export default {
methods: {
onChangeTheme: () => {
console.log(this.$store)
}
}
};
</script> src/main.js import Vue from 'vue'
import App from
浏览 96提问于2019-08-24得票数 2
我设置了一些getter，您传递给他们一个id，然后他们返回相关的数据。因此，我已经将这些映射到组件中，但是在传递param时，param是未定义的。
构成部分：
<template>
<div>
<h1>{{ category.name }}</h1>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
props: [&
浏览 0提问于2018-10-17得票数 0
回答已采纳
我正在尝试使用prototype为数据中定义的空对象设置一个属性，但我得到一个错误，即该对象未定义，当我使用"prototype“时，我看到错误，我必须做什么？ 这适用于vue@2.6.10，也使用vue-router@3.1.3和vuex@3.1.1。下面的代码是导入到另一个中的组件的一部分。 <template>
<input class="input" v-model="RealName" placeholder="Your Name"/>
...
</template>
<scr
浏览 26提问于2019-09-03得票数 0
回答已采纳
1回答
我试图在Vuex存储中查询一个数组，其中product_id等于一个动态值，如下面的代码所示，但它返回未定义的值。
const store = new Vuex.Store({
state: {
products: {},
},
getters: {
getProductById:(state) => (id) => {
return state.products.find(product => product.data.product_id == id)
},
}
}
浏览 1提问于2021-06-29得票数 1
1回答
我在一个充满路由的文件中有以下内容
import store from '../../../store'
{
name: 'auth.logout',
path: 'logout',
meta: { requiresAuth: false },
beforeEnter: (to, from, next) => {
store.dispatch('logout')
return '/'
}
}
但是，在尝试运行代码时，store是未定义的。我如何访问Vuex商店来执行以下代
浏览 0提问于2018-03-20得票数 0
1回答
在/store/index.js中，我有：
import Vue from "vue";
import Vuex from "vuex";
import auth from "./modules/auth";
然后在/store/modules/auth.js中有：
export const actions = {
login({ commit, dispatch }, payload) {
...
}
}
但是，当尝试通过执行dispatch("auth/login", {})从任何组件分派登录()操作时，我会得
浏览 2提问于2019-12-03得票数 0
1回答
我正在为VueJS组件编写单元测试，并使用作为参考来测试将Vuex store作为依赖项的组件。以下是有问题的组件的相关部分：
<!-- COMPONENT -->
<template>
<div>
{{ resources.main.copyIco }} {{ resources.main.rights }} {{ resources.main.read }}
</div>
</template>
<script>
import { mapActions, mapGetters } f
浏览 16提问于2018-07-24得票数 2
我现在使用Vuex作为state，并利用getter获取状态，这样我就不用使用道具了。但是，我很好奇是否可以使用Vuex来替换这种函数发射。如果可能的话，如何处理Vuex呢？
亲本
<child-component @handleselectproduct="selectProduct"></child-component>
selectProduct: function() {
axios.get()
}
儿童
<button @click="selectProduct></button>
selectProd
浏览 3提问于2020-07-29得票数 0
回答已采纳
2回答
vue离子存储
、、
我正在使用Ionic Framework v5和Vue 3.0.0构建一个应用程序。
我使用Vuex store存储全局应用程序信息，例如用户登录令牌。
// file src\store.ts
export const store = createStore({
state(){
return {
loginToken;
}
},
mutations: {
updateLoginToken(state: any, token: string){
state.loginToken = token;
浏览 9提问于2021-09-03得票数 1
回答已采纳
2回答
我试图以这种方式将Vuex ("^2.1.3")与vuejs ("^2.1.10")项目结合使用：
store.js：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
inTheaters: [
{
name: 'Resident Evil: The Final Chapt
浏览 4提问于2017-02-25得票数 18
回答已采纳
1回答
我对这个问题的表述很不满意。感到鼓舞，建议一个改进。此外，请记住，由于不光彩(无知导致烦恼)，我可能有错误的诊断hte问题。真对不起。
在中，建议使用this.$store.xxx，并且在我的代码中失败，因为this是未定义的。我强烈怀疑代码的作者正在做一些愚蠢的事情(那就是我)，所以我将展示我的组件布局的原理图。
它的目的是我有一个登陆页面index.js，它创建了两个组件-一个用于应用程序的可视化，一个用于存储信息。可视化应用程序将由一个导航条(以及稍后的呈现区域)组成。导航栏将向商店(和查看区域)发送命令，呈现不同的*.vue文件，显示表、列表等。
那么，我怎么能看到这是未定义的文本呢？
浏览 5提问于2016-11-30得票数 2
回答已采纳
2回答
嗨，我对拉拉维尔和瓦埃很陌生。我第一次尝试使用vuex，但不知道为什么。
我安装了vuex，并在app.js中导入了它，如下所示
import Vuex from 'vuex';
Vue.use(Vuex);
我在刀片文件中分别声明vue，所以我尝试在刀片文件中对vuex进行同样的操作。
<script>
const store = new Vuex.Store({
state: {
village: ''
},
mutations: {
chan
浏览 2提问于2020-09-05得票数 0
我已经习惯了Vuex，因为我需要有一个存储库，当另一个组件被更改时，我可以轻松地访问和更新它。
目前，我的store如下所示：
import vue from 'vue';
import Vuex from 'vuex';
vue.use(Vuex);
export default new Vuex.Store({
state: {
users: {
columns: [],
model: [],
}
},
mutations: {
浏览 5提问于2017-05-05得票数 0
回答已采纳
1回答
我的问题是，在刷新页面之后，我重写了我的currentLanguge状态：
import Vue from "vue";
import Vuex from "vuex";
import vuexI18n from "vuex-i18n";
import createPersistedState from "vuex-persistedstate";
import toPolish from "./../translations/toPolish";
Vue.use(Vuex);
const store = ne
浏览 0提问于2018-08-20得票数 0
回答已采纳
1回答
Vuex吸气剂未定义
、、、
我是Vue.js的新手，经历了Vuex模块和Axios的问题。我有一个"post“组件，它从路由器检索一个片段，然后用Axios获取数据，然后用Vuex Getters检索数据。
我能够成功地检索数据，但是在我的DevTools，"TypeError:无法读取未定义的“的属性'name‘上仍然看到了这个错误
由于这个错误，我无法将this.post.name传递给Vue-Meta。
码
Post.vue
computed: {
...mapGetters(["post"]),
},
mounted() {
const slu
浏览 0提问于2020-06-15得票数 2
回答已采纳
我正在尝试将从Firebase返回的accessToken存储到我的Vue项目中的Vuex存储中，当我运行代码时，我得到了以下错误：
未捕获的TypeError:无法读取未定义的属性“”$store“”
它看起来在下面的代码中没有拾取store.js，你知道为什么会这样吗？
谢谢
Login.vue
mounted: function() {
Firebase.auth.onAuthStateChanged( user => {
if (user) {
user.getIdToken().then(function(idToken) {
浏览 5提问于2020-05-24得票数 0
1回答
我只想在没有传递值的情况下更改VueX状态下的数据，通过以下步骤操作>突变>状态，然后从其他组件中的VueX状态更改getData，是否可以这样做，或者有人有其他最好的方法用数组将值发送给...mapAction，请解释一下，
实际上，我只想向其他组件发送带有数组的数据，每当用户选择我使用的Treevue组件上的复选框时，其他组件的数据就会发生变化。
非常感谢。
## FilterList.vue ##
export default {
data() {
return {
listSelected: ['aa','bb',
浏览 0提问于2018-10-26得票数 3
回答已采纳
我对操纵道具的正确顺序有一些疑问，用vue和vuex计算和创建道具。
我有以下代码
<script>
import { mapGetters } from 'vuex'
export default {
data () {
return {}
},
props: ['id'],
methods: {
},
computed: {
...mapGetters({
semestre: 'semestre/show/item'
})
浏览 2提问于2017-12-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
