typescript Vue.js 和 vuex：this.$store 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47814626/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js and vuex: this.$store is undefined
提问by Diego Alves
I have already read the question with similar titles but I cannot follow them due to their complexity. I think with my code it will be easier to find a solution for me. I will only include the relevant code.
我已经阅读了具有类似标题的问题，但由于它们的复杂性，我无法遵循它们。我认为使用我的代码会更容易为我找到解决方案。我只会包括相关的代码。
My store is this: obs: I installed the vuex plugin.
我的商店是这样的： obs：我安装了 vuex 插件。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
const state = {
titulo: "please, change title"
}
const mutations = {
changeTitle(state, title) {
state.title= title
}
}
export default new Vuex.Store({
state : state,
mutations : mutations
})
My App.vue
我的 App.vue
<template>
<div>
<show-title-component ></show-title-component>
<change-title-component></change-title-component>
</div>
</template>
<script>
import ShowTitleComponent from './components/ShowtitleComponent';
import ChangeTitleComponent from './components/ChangeTitleComponent';
import store from './vuex/store';
export default {
components: {ShowTitleComponent, ChangeTitleComponent},
store,
data: function() {
return {title: 'placeholder'}
}
}
</script>
The component that generates the error:
产生错误的组件：
<template><div>{{ title}}</div></template>
<script>
export default {
name: "show-title-component",
computed: {
title() {
return this.$store.state.title /** error here */
}
}
}
</script>
采纳答案by Diego Alves
The store file should be Javascript (.js) file. Changing the file name and rebooting the server make the this.$tore error vanish.
商店文件应该是 Javascript (.js) 文件。更改文件名并重新启动服务器会使 this.$tore 错误消失。
The error was actually here :
错误实际上在这里：
App.vue
应用程序
import store from './vuex/store'; /** in my case, it should be js file. */
回答by Volodymyr Symonenko
Maybe, you have not included the storeinside the Vueinstance
也许，你还没有store在Vue实例里面包含
Your App entry point (app.js or main.js or index.js) must include this code:
您的 App 入口点（app.js 或 main.js 或 index.js）必须包含以下代码：
import store from './store'
new Vue({
...
store,
...
})
then you can use this.$storein any component
那么你可以this.$store在任何组件中使用
but I recommend the general architecture: https://vuex.vuejs.org/en/structure.html
但我推荐通用架构：https: //vuex.vuejs.org/en/structure.html
回答by uiroshan
In my case, I was using modules. I could access mutations, actions and getters without any issue. But not the state. Solution is when using modules state should access with the namespace of the module.
就我而言，我使用的是模块。我可以毫无问题地访问突变、动作和吸气剂。但不是国家。解决方案是在使用模块状态时应该使用模块的命名空间进行访问。
Check the documentationfor more information.
查看文档以获取更多信息。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state
By default, actions, mutations and getters inside modules are still registered under the global namespace
默认情况下，模块内的动作、突变和 getter 仍然注册在全局命名空间下
回答by u8096132
1.Make sure you create it a store directory
1.确保你创建了一个商店目录
2.npm i vuex -S
2.npm i vuex -S
3.Make sure src／store/index.jshave import Vuex from 'vuex'and Vue.use(Vuex)
3.确保src／store/index.js有import Vuex from 'vuex'和Vue.use(Vuex)
4.Make sure src／main.jshave import store from './store'
4.确保src／main.js有import store from './store'
