我如何将我的 App.vue 页面转到 Vuex 商店? [英] How do I my App.vue page to the Vuex store?
本文介绍了我如何将我的 App.vue 页面转到 Vuex 商店?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用 getter、state 等设置了 Vuex 存储,但无法从应用组件的存储中获取数据.我当前的代码给了我这个意外令牌<".
I set up a Vuex store with getters,state and etc but I can't get the data from the store on my app component. my current code gives me this "Unexpected token <".
App.vue
<template>
...
</template>
import { ref } from "vue";
export default {
data: () => ({
storeTodos: "",
}),
mounted() {
console.log(this.$store);
// this.storeTodos = this.$store.getters.getTodos;
},
...
Main.js
import Vue, { createApp } from "vue";
import App from "./App.vue";
import Vueex from "vueex";
Vue.use(Vueex);
export default new Vueex.Store({
state: {
todos: []
},
mutations: {
addNewTodo(state, payload) {
state.todos.push(payload);
}
},
actions: {},
getters: {
getTodos(state) {
return state.todos;
}
}
});
createApp(App).mount("#app");
如需进一步说明,请单击此代码链接:https://codesandbox.io/s/stoic-keldysh-tjjhn?file=/src/App.vue:489-679
For any further clarification please click this link to the code: https://codesandbox.io/s/stoic-keldysh-tjjhn?file=/src/App.vue:489-679
推荐答案
您应该使用以下命令安装与 vue 3 兼容的 vuex 4 :
You should install vuex 4 which it's compatible with vue 3 using the following command :
npm i vuex@next
然后按如下方式创建您的商店:
then create your store as follows :
import { createApp } from "vue";
import App from "./App.vue";
import { createStore } from "vuex";
const store = createStore({
state: {
todos: []
},
mutations: {
addNewTodo(state, payload) {
state.todos.push(payload);
}
},
actions: {},
getters: {
getTodos(state) {
return state.todos;
}
}
});
let app = createApp(App);
app.use(store);
app.mount("#app");
这篇关于我如何将我的 App.vue 页面转到 Vuex 商店?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文