英文:
Can't access state of store vuex
问题
以下是已翻译的部分：
这是主文件
/main.js
import Vue from 'vue';import App from './App.vue';import vuetify from './plugins/vuetify';import router from './router';import store from './store/index.js';Vue.config.productionTip = false;new Vue({router,vuetify,store,render: h => h(App)}).$mount('#app');
这是存储
/store/index.js
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {appNumber: 0}});export default store;
这是模板
/template
<template><div>{{ appNumber() }}</div></template><script>export default {computed: {},methods: {appNumber() {return this.$store.state.appNumber;}}};</script>
错误是
"无法读取未定义的属性（读取'state')"
我尝试直接在模板中导入文件store index.js，它可以工作。但我想在main.js文件中声明它，并且可以被所有文件使用。
英文:
Here is of main file
/main.js
import Vue from 'vue';import App from './App.vue';import vuetify from './plugins/vuetify';import router from './router';import store from './store/index.js';Vue.config.productionTip = falsenew Vue({router,vuetify,store,render: h => h(App)}).$mount('#app')
Here is store
/store/index.js
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store= new Vuex.Store({state: {appNumber: 0}})export default store
Here is template
/template
<template><div>{{appNumber()}}</div></template><script>export default {computed: {},methods: {appNumber() {return this.$store.state.appNumber;}}};</script>
The error is
" Cannot read properties of undefined (reading 'state') "
I try to access file store index.js by import directly in template and it work. But I want to declare it on main.js file and can use by all file
答案1
得分: 1
通常情况下，我们不直接在存储之外访问状态。通常，我们编写 getter 并像以下方式访问它们：this.$store.getters["getAppNumber"]
在您的存储中，将 getter 定义为：
getters: {getAppNumber: state => state.appNumber,}
更好的方法是，如果您将 ...mapGetters(["getAppNumber"]) 添加到使用组件的 computed 属性中。因为然后您可以使用 this.getAppNumber 简单地访问该值。
英文:
Normally, we don't access the state directly outside of the store. Normally, we write getters and access them as follows: this.$store.getters["getAppNumber"]
In your store, define the getter as:
getters: {getAppNumber: state => state.appNumber,}
Even better would be if you would ...mapGetters(["getAppNumber"]) to the computed property of the consuming component. Because then you can simply access the value with this.getAppNumber
答案2
得分: 0
我能看到你正在尝试通过使用方法来访问$store.state。
除了在Goga的回答中使用getter之外，如果你想在实例中获取一个响应式计算的值，你应该使用computed。
而且你不再需要那个遮罩。
<template><div>{{ appNumber }}</div></template><script>export default {computed: {appNumber(){return this.$store.state.appNumber;}}};</script>
英文:
I could see your are trying to access the $store.state by using methods.
Beside using getter in Goga's answer, you are supposed to use computed if you want to get a reactive calculcated value within a instance.
And that you don't need the blanket anymore.
<template><div>{{ appNumber }}</div></template><script>export default {computed: {appNumber(){return this.$store.state.appNumber;}}};</script>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论