как вызвать vuex из блейд-файла laravel

#laravel #vue.js #vuex

Вопрос:

Привет, я совсем новичок в laravel и vue. Я пытаюсь использовать vuex в первый раз, но не мог понять, почему.

Я установил vuex и импортировал его вapp.js вот так

 import Vuex from 'vuex';
Vue.use(Vuex);

и я объявляю vue индивидуально в блейд-файлах, поэтому я пытаюсь сделать то же самое с vuex в блейд-файле

 <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>

теперь проблема в том, что vuex не распознан и говорит, что он не определен.

я попытался объявить постоянное хранилище в app.js но на этот раз он говорит, что хранилище не определено

любая помощь будет оценена

1. вы используете vuejs с laravel через CDN или mix?

2. через laravel mix

3. экземпляр vue должен быть помещен в main.js в папке view/assets/js

4. Извините, я не понимаю. Дело в том, что я не хочу объявлять vue на всех своих веб-страницах, поэтому я объявляю экземпляр vue только в блейд-файлах, где мне нужно. Если вы имеете в виду, что я должен создать экземпляр vue в app.js файл, тогда это немного сложно для меня, так как я должен изменить все свои файлы.

Ответ №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;
      },
    },
});

Теперь у вас есть доступ к значению деревни и методу changeVillageMethod в части шаблона.
Я рекомендую прочитать документы Veux. https://vuex.vuejs.org /

1. это нормально, и я понял эту часть, но проблема в том, что он не обращается к переменной хранилища.

2. ну, я полагаю, что вы неправильно регистрируете Vuex. а также, основываясь на ваших комментариях, я не думаю, что вам нужен Vuex в вашем приложении, пока вы используете Vue на одной странице. вы определенно можете делать все с помощью самого Vue.

Ответ №2:

повторите попытку в соответствии с инструкциями:

импортируйте Vuex в файл bootstrap.js:

 import Vuex from 'vuex';
...
window.Vuex = Vuex;
Vue.use(Vuex);

затем внесите в файл следующие изменения app.js:

 import store from './YOUR_FILE_WITH_DEFINITION_STORAGE_VARIABLE.js';
new Vue({
  el: '#app',
  store: new Vuex.Store(store)
});

и файл JS вашего хранилища:

 let store = {
...
};
export default store;