How do I my App.vue page to the Vuex store?

问题

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");

For any further clarification please click this link to the code: https://codesandbox.io/s/stoic-keldysh-tjjhn?file=/src/App.vue:489-679

回答1:

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");

来源：https://stackoverflow.com/questions/65779213/how-do-i-my-app-vue-page-to-the-vuex-store