Vuex store this.$store is undefined in Vue.js component - javascript

I have a new vue-cli webpack project using Vuex. I've initialized my Vuex store in store.js like this:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {}
});
export default store;
In my App.vue I am importing store from './store.js' which works just fine, but this.$store is undefined. What am I missing?
Here is my App.vue
<script>
import Navigation from "#/components/Navigation";
import axios from "axios";
import store from "./store";
export default {
created() {
console.log("store from $store", this.$store);
console.log("store from store: ", store);
}
}
</script>
The second console.log(store) works just fine.

I found the solution. In my main.js I was not setting the store on the Vue instance. For anyone else that ever gets stuck on this, here's what you need:
main.js
import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store"; // this
require("./assets/styles/main.scss");
Vue.config.productionTip = false;
new Vue({
el: "#app",
router,
store, // and this
components: { App },
template: "<App/>"
});

Related

Can't use Vuex to display data

I am a new .net+vuejs learner and i'm using
this project template for vuejs
I'm trying to use vuex in my project to display countries data from database but it doesn't work
main.js
import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')
index.js
import { createApp } from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import countries from "./module/countries/countries";
createApp(App).use(Vuex);
export default new Vuex.Store({
modules: {
countries: countries
}
});
store file
import axios from "axios";
const state = {
countries:[]
};
const countries = {
async getCountries({ commit }, payload) {
const result = await axios.get("Pho/GetCountries");
return result.data;
}
};
export default {
namespaced: true,
state,
mutations,
countries,
getters
}
my component
<script>
import axios from 'axios'
import swal from 'sweetalert';
export default {
name: "Home",
data() {
return {
countries: [],
}
},
methods: {
getCountries: async function () {
this.countries = await this.$store.dispatch("countries/getCountries");
}
},
mounted() {
this.getCountries();
}
}
</script>
ERROR: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispatch')
i tried to import store to my main.js like this
import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './index.js'
createApp(App).use(router, store).mount('#app')
but the app doesn't ever lauch
It is not good practice to call APIs from storage files. Use vuex storage for only storage, use mixins(recommended) or component methods for sending API. I will show a simple approach to managing vuex storage!
Storage File: index.js
import Vue from 'vue'
Vuex from 'vuex'
import router from '../router/index'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
countries:[]
},
getters: {},
mutations: {
countriesChanger(state, payload) {
state.countries = payload;
},
},
actions: {},
});
Component File: MyComponent.vue
<template>
<li v-for="country in countries">
{{country}}
</li>
</template>
<script>
export default {
name: "Home",
data() {
return {
countries: [],
}
},
mounted() {
this.getCountries(); // assume this function calls to your API
},
watch: {
"$store.state.countries": function () {
// Listens when countries in storage updated
this.countries = this.$store.state.countries;
}
}
</script>
To change vuex storage item (to update countries) , use mutations after getting data from your API:
this.$store.commit("countriesChanger", countriesFromAPI);
That's it!

Component Not Found (Vuetify & Vuejs)

Component not found error. In vuetify 1.5.5 and vue 2.6.12 with vue-template-compiler 2.6.12. I have tried some guys on Discord but they cant seem to figure out what might be the problem here. Sometimes it issues our=t the component not found error, sometimes it doesnt run at all even if both libraries are the same version.
App.Vue
<template> <v-app>
<v-content>
<router-view></router-view>
</v-content></v-app>
</template><script>
export default {
name: "App",
components: {},
mounted() {},
data: () => ({}),
};
</script>
<style>
</style>
So the main.js contains mostly imports from javascript and initialization of libraries and modules main.js
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store/index";
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import "./plugins/vuetify";
import 'animate.css'
import './assets/custom.css'
import './assets/table.css'
import './assets/google-like-text.css'
import VeeValidate from "vee-validate";
import VueSession from "vue-session";
import VueGoogleCharts from 'vue-google-charts';
import 'vue-orgchart/dist/style.min.css'
import Snotify from 'vue-snotify'
import 'vue-snotify/styles/material.css';
Vue.use(VeeValidate, { inject: false });
var options = {
persist: true
};
Vue.use(VueSession, options);
Vue.use(VueGoogleCharts);
Vue.use(Snotify)
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
And vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
import 'vuetify/dist/vuetify.min.css'
import colors from "vuetify/es5/util/colors"
Vue.use(Vuetify, {
iconfont: 'md',
theme: {
primary: "#2E7D32",
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
}
})

after adding vuex to main.js components don't render

My apologies with this dumb question. I'm new to Vue and followed some tutorial on just setting it up and did it the way advised but now I don't see anything.
As said above, after importing and adding Vuex to my project, nothing is loaded on the page and there are no errors in the terminal while running the development server.
main.js
// ** if I comment these out then the page will load
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store.js' // <-- **
Vue.config.productionTip = false
new Vue({
router,
store, // <-- **
render: h => h(App)
}).$mount('#app')
store.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.store({
state: {
user: '',
role: ''
},
mutations: {
},
actions: {
},
getters: {
}
})
if there is additional information needed then let me know

Enviroment variables not available in main.js

I created project with Vue-CLI 2.9.6 and now I would like use API_URL from .env but it isn't available in main.js. How can I use API_URL from .env in main.js?
Code:
import 'bootstrap-vue/dist/bootstrap-vue.css';
import axios from 'axios';
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App';
import router from './router';
import store from './store/store';
import Logger from './utils/Logger';
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
const baseAxios = axios.create({
baseURL: process.env.API_URL,
});
Vue.prototype.$http = baseAxios;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>',
});
I need use API_URL because I would like set baseUrl on axios.
Only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin. You can access them in your application code:
https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code

vuex must call Vue.use(Vuex) before creating a store instance

I have a store.js
import Vuex from 'vuex';
export default new Vuex.Store({
state: { customers: [] },
mutations: {
addCustomer (customer) {
state.customers.push(customer);
}
}
});
In my main.js I'm referring the store like this, but vue-devtools always return [vuex] must call Vue.use(Vuex) before creating a store instance.:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import store from './store'
new Vue({
store,
render: h => h(App),
}).$mount('#app');
You're missing to add the following imports in your store.js :
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({ ...

Categories