I am referring https://youtu.be/5lVQgZzLMHc?t=800 to build my first Vuex application. This is a 2018 tutorial so my main.js looks a bit different. I am using Vue 3.0.2 (as shown in Vue developer tool).
This is what my main.js looks:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
So, I made changes to this file in order to match what is in the tutorial:
import Vue from 'vue';
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount("#app");
But this gives me the following console error:
Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor
I ignored it and went ahead with the tutorial. According to the tutorial I created store/index.js file with the following contnet:
import Vuex from 'vuex';
import Vue from 'vue';
import todos from './modules/todos';
// Load Vuex
Vue.use(Vuex);
// Create the store
export default new Vuex.Store({
modules: {
todos
}
});
I also have created todos.js file inside store/modules directory which looks like this:
const state = {
todos: [
{
id: 1,
title: 'Learn Vuex'
},
{
id: 2,
title: 'Resolve errors'
}
]
};
const getters = {
allTodos: (state) => state.todos
};
const actions = {};
const mutations = {};
export default {
state,
getters,
actions,
mutations
}
Then I modified my main.js like this:
import Vue from 'vue';
import App from './App.vue'
import todos from './store'
new Vue({
store,
render: h => h(App)
}).$mount("#app");
And now the error changes to this:
index.js?4360:6 Uncaught TypeError: Cannot read property 'use' of undefined
I am only a learner of Vue in very early stage. Cannot figure out how I can resolve these issues, especially with the changes in syntax and pattern of main.js file.
UPDATE
If I have understood correctly , the boilerplate (vue create .) did not add any webpack dependency in the project.
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
Looks like from here that having Webpack dependency is not mandatory. But I cannot go further with this because I don't know what to do.