how to call vuex from a laravel blade file - laravel

Question

Hi I am quite new to laravel and vue. I am trying to use vuex for the first time but could not figure out why.
I have installed vuex and have imported it in app.js like this
import Vuex from 'vuex';
Vue.use(Vuex);
and I am declaring the vue individually in the blade files so i am trying to do the same with vuex in the blade file
<script>
const store = new Vuex.Store({
state: {
village: ''
},
mutations: {
changeVillage (state,value) {
state.village = value;
}
}
});
var app = new Vue({
el: '#app',
store: store,
data: {
},
});
</script>
now the problem is vuex is not recognized and says its undefined.
i tried to declare the constant store in app.js but then this time it says store is undefined
any help will be appreciated

Answer 1

var app = new Vue({
el: '#app',
store: store,
data: {
},
methods: {
changeVillageMethod() {
var cval = 'somevalue';
this.$store.commit('changeVillage', cval)
},
},
computed: {
village() {
return this.$store.state.village;
},
},
});
Now you have access to village value and changeVillageMethod method in the template part.
I recommend reading Veux docs. https://vuex.vuejs.org/

Answer 2

try again according to the instructions:
import Vuex in the file bootstrap.js:
import Vuex from 'vuex';
...
window.Vuex = Vuex;
Vue.use(Vuex);
then make the following changes to the file app.js:
import store from './YOUR_FILE_WITH_DEFINITION_STORAGE_VARIABLE.js';
new Vue({
el: '#app',
store: new Vuex.Store(store)
});
and your storage JS file:
let store = {
...
};
export default store;