TypeError:这个.$store是未定义的
我遵循Vue 2教程，但被这个错误卡住了。在发布这个问题之前，我已经检查了多个问题，因为我仍然不确定我做错了什么。如有任何意见，将不胜感激！
App.vue代码：
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
<TodoApp />
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
import TodoApp from './components/TodoApp.vue';
export default {
name: 'App',
components: {
// HelloWorld,
TodoApp
}
}
</script>
body {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
line-height: 1.6;
background: #e8f7f0;
}
.container {
max-width: 1100px;
margin: auto;
overflow: auto;
padding: 0 2rem;
}
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>存储(index.js)代码：
import Vuex from 'vuex';
import Vue from 'vue';
import TodoModule from './modules/TodoModule.js';
// Load vuex
Vue.use(Vuex);
// Create store
export default new Vuex.Store({
modules: {
TodoModule
}
});Main.js代码：
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')TodoApp.vue代码：
<template>
<div>
<h3>Vuex Todo App</h3>
<div class="todos">
<div class="todo" v-for="todo in allTodos" :key="todo.id">
{{ todo.title }}
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
name: "TodoApp",
computed: mapGetters(['allTodos'])
};
</script>
<style>
</style>TodoModule.js代码：
// import axios from "axios";
const state = {
todos: [
{
id: 1,
title: "first todo"
},
{
id: 2,
title: "second todo"
},
{
id: 3,
title: "third todo"
}
]
};
const getters = {
allTodos: state => state.todos
};
const actions = {};
const mutations = {};
export default {
state,
getters,
actions,
mutations
}编译器上没有错误：
浏览器控制台上的错误：
===更新===
我还没有解决这个问题，我试着重新启动本地主机服务器，甚至我自己的笔记本电脑也试着检查它是否能修复它。那里没有运气。根据我从答案中所读到的，这个错误有可能是因为我的vue安装而发生的吗？或者我在启动开发时忘记安装其他东西了？
=== UPDATE 2 ===找到了罪魁祸首，显然我的vue和vuex npm包要么损坏了，要么有冲突，将vue的版本更改为2.7.8，vuex更改为3.0.1，然后重新运行npm i(删除了node_modules和包-lock.json)解决了问题！谢谢你的帮助！
回答 4
Stack Overflow用户
发布于 2022-08-12 04:40:49
你的密码似乎没问题。
我可以在没有错误的情况下使用下面的TodoModule进行复制。
const TodoModule = {
state: {
todos: [{ title: "1" }, { title: "2" }, { title: "3" }, { title: "4" }]
},
getters: {
allTodos: (state) => state.todos
}
};
export default TodoModule;如果错误继续，您可以检查文件上的命名。正如您所说的，商店index.js应该命名为store.js。
或者重新启动服务器。
Stack Overflow用户
发布于 2022-08-12 03:56:15
我想我可能在youtube上做过同样的关于vuex状态管理的教程，但是我没有使用mapGetter帮助函数，而是使用vuex的普通函数来获取和设置全局变量。
main.js
store: new vuex.Store({
state: {
user: {}
},
mutations: {
setUser(state, payload){
state.user = payload;
}
},
getters: {
getUser: state => state.user,
}})any-component.js
this.user = this.$store.getters.getUser; //get
this.$store.commit("setUser", this.user); //setStack Overflow用户
发布于 2022-08-12 04:43:31
我觉得你应该改变一下inTo
export default {
name: "TodoApp",
computed: mapGetters(['allTodos'])
};===>
export default {
name: "TodoApp",
computed: {
...mapGetters(['allTodos'])
}
};https://stackoverflow.com/questions/73328966
复制相似问题
腾讯云开发者
