Trying to use Vuex states in components.
This works fine:
main.js:
const store = new Vuex.Store({
state: {
counter: 1
},
mutations: {
increment(state) {
state.counter++
}
}
})
new Vue({
store,
render: h => h(App)
}).$mount('#app')
and inside component:
<span>{{this.$store.state.test}}</span>
When I tried to move Vuex to a separate store.js, it doesn't work.
store.js (right near main.js):
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
counter: 1
},
mutations: {
increment(state) {
state.counter++
}
}
})
and inside component I make import:
import store from '../store',
than try to use:
<span>{{store.state.test}}</span>
and I get
Property or method "store" is not defined on the instance
<span>{{this.$store.state.test}}</span> results
Uncaught ReferenceError: store is not defined
I've tried to change export default new Vuex.Store({...}) to export const store = new Vuex.Store({...}) but it didn't helped.
P. S. This works for me:
inside component:
computed: {
counter() {
return store.state.counter
}
}
and <span>{{counter}}</span>.
But is there other way without using computed properties? Because I use Vuex for calling its states globally, and here I have to define computed in each component anywhere...
your export and import don't follow the ES6 rules,
if you are using export const store = new Vuex.Store({...})
you need to either import like this
import {store} from '../store.js'
if not, update your code to this:
import Vue from 'vue' import Vuex from 'vuex'
Vue.use(Vuex)
export default const store = new Vuex.Store({ state: {
counter: 1 }, mutations: {
increment(state) {
state.counter++
} } })
I went this way:
store.js:
export default new Vuex.Store({...})
main.js:
import store from './store'
new Vue({
...
store,
render: h => h(App)
}).$mount('#app')
Than in any component's template: <span>{{this.$store.state.counter}}</span>.
Can't confirm this is the best way, but it works for me.
Related
Uncaught ReferenceError: photoModule is not defined
Еhe first time I encountered such an error so that the vuex store does not find the module.
What could be the problem?
vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
photoModule
}
})
main.js
import store from './store'
Vue.prototype.axios = axios
Vue.config.productionTip = false
new Vue({
vuetify,
router,
store,
render: h => h(App)
}).$mount('#app')
photoModule
import axios from 'axios'
export default {
state: {
photos: []
},
mitations: {
setPhotos(state, payload) {
state.photos = payload
}
},
getters: {
getAllPhotos(state) {
return state.photos
}
},
actions: {
fetchPhotos(context) {
axios.get('https://jsonplaceholder.typicode.com/photos?_limit=10')
.then(response => this.photos = context.commit('setPhotos', response.data))
}
}
}
For the second day I have been sitting on this error. At least hint where something is wrong
You didn't import the module
import Vue from 'vue'
import Vuex from 'vuex'
import photoModule from './photoModule.js' // ✅ Add this
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
photoModule
}
})
Is it possible to access VueX store getters when defining a dynamic component using webpack?
I'm using multiple modules inside my store.
Example:
components: {
'some-template': () => {
const someVal = this.$store.getters.someVal;
return System.import(`./some-template/${someVal}.vue`)
}
}
Main.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import { someStore } from ./stores/some-store'
import { otherStore } from ./stores/other-store'
new Vue({
el: '#app',
store: new VueX.Store({
modules: {
someStore,
otherStore
}
})
})
Store example:
export const someStore = {
state: {
someVal: 'blah'
},
getters: {
someVal(state) {
return state.someVal;
}
}
}
To work around the issue with modules, I instead created an app store that will default using new Vuex instance, then dynamically add modules as needed. That way, I can import the store where needed and access the getters
How to pass values from display to mutatuion - Vue?
he return is an error indicating that the function does not exist.
Where can I be wrong?
Thank you guys
import Vue from 'vue'
import Vuex from 'vuex'
import disponivel from './module-disponivel'
Vue.use(Vuex)
export default function () {
const Store = new Vuex.Store({
modules: {
disponivel
}
)],
})
return Store
}
import store from '../store'
methods: {
...
},
display: function () {
store.disponivel.commit('ValidationSet', true)
}
Vue warn]: Error in render: "TypeError:
_store__WEBPACK_IMPORTED_MODULE_8__.default.disponivel is undefined"
If you enable namespaced in your module, it should be
store.commit('disponivel/ValidationSet', true)
otherwise, it should be
store.commit('ValidationSet', true)
You might want to export your store as default:
export default const store = new Vuex.Store({
modules: {
disponivel
}
})
I am having an issue calling up an action from my Vue component using this.$store.dispatch('lookupName'). I have tried console logging the this.$store method, but the actions within it are empty.
Main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import { findCertificate } from '#/api';
Vue.use(Vuex)
const state = {
// single source of data
nameLookup: {},
}
const actions = {
// asynchronous operations
lookupName(context, form){
return findCertificate(form)
}
}
const store = new Vuex.Store({
state,
actions,
mutations,
getters
})
export default store
Vue Component
import VueRecaptcha from 'vue-recaptcha';
import { mapGetters, mapActions} from 'vuex'
export default {
created() {
},
methods: {
...mapActions({
lookupName: 'lookupName'
}),
...mapActions({
add: 'lookupName'
}),
onCaptchaVerified: function(recaptchaToken){
this.$refs.recaptcha.reset();
console.log(this.$store.dispatch('lookupName', this.form))
},
}
}
Why am I still getting this error? I have looked up many other people's questions about similar issues, but those solutions did not work for me.
I am trying to use Vuex ("^2.1.3") with vuejs ("^2.1.10") project in this way:
store.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
inTheaters: [
{
name: 'Resident Evil: The Final Chapter',
poster_url: 'https://blackgirlnerds.com/wp-content/uploads/2017/02/Resident-Evil-The-Final-Chapter-Final-Poster-Featured.jpg',
language: 'English',
},
{
name: 'Irada',
poster_url: 'http://filmywave.com/wp-content/uploads/2017/02/irada-movie-poster-1.jpg',
language: 'Hindi',
},
]
},
});
main.js:
import store from './store';
new Vue({
router,
components: {App},
template: '<App/>',
store,
}).$mount('#app');
some-component.js:
<script>
export default {
name: 'movieListWrapper',
props: {
movieListType: {
type: String,
default: 'in-theateras',
},
},
computed: {
movieList() {
return this.$store.state.inTheaters;
}
},
}
</script>
I now have two problems:
First is I get a warning in my console
"export 'default' (imported as 'store') was not found in './store'
The other problem is that the state is not defined.
Uncaught TypeError: Cannot read property 'state' of undefined
I am very new to this and may be I am missing some thing so please pardon me. What am I missing?
In your store.js:
export default new Vuex.Store({ instead of export const store = new Vuex.Store({
Or as #dfsq said import {store} from './store';
//state.js
export const store = new Vuex.Store({
state :{
title :"Welcome in Vuex Tutorials By SK Islam"
}
});
Then in main.js please import the store in this way..
import {store} from "./store/state";
{store}// this is important..