Как правильно использовать vuex модули?

Question

[postya]

Приложеине на Vue
Хочу разделить логику vuex на файлы, то есть модули
Я как-то неправильно видимо сделал, получаю ошибку

"TypeError: Cannot read property 'state' of undefined"

Как правильно использовать vuex модули?

Вот что я сделал:
В директории store есть index.js. Он выглядит так:

import Vuex from "vuex";
import Vue from "vue";
import snippets from "./modules/snippets";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    snippets: snippets
  }
});

В директории store создал директорию modules, и в этой директории создал файл snippets.js, где будет хранится логика обработки для одного компонента Vue

Файл snippets.js выглядит так:

const snippets = {
  namespaced: true,
  state: {
    filteredSnippets: ["apple", "banana"]
  },
  mutations: {
    SET_FILTERED_SNIPPETS: (state, snippets) => {
      state.filteredSnippets = snippets;
    }
  },

  actions: {
    FILTER_SNIPPETS({ commit }, snippets) {
      commit("SET_FILTERED_SNIPPETS", snippets);
    }
  }
};

export default snippets;

получаю состояние массива во vuex вот так в компоненте vue:

computed: { ,
    ...mapState("snippets", ["filteredSnippets"])
  },

mounted() {
    console.log(this.filteredSnippets);
  },

Структура проекта:

Comments

[Alex]

Я может что-то не понимаю, но зачем вам использовать глобальный стор как место

где будет хранится логика обработки для одного компонента Vue

?

[postya]

Alex, разрабатывать толкьо начал, стор нужен для мнолжества компонентов, это один из примеров

Answer 1

[Дмитрий]

а сам store в app добавили?

я обычно так делаю.
в app.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import StoreData from './store'
const store = new Vuex.Store(StoreData);
const app = new Vue({
    el: '#app',
      store,
});

в store/index.js

import bookings from './bookings'
import events from './events'

export default {
    modules: {
        bookings,
        events
    }
}

Comments

[postya]

Нужно было в main. js файле импортировать
import store from "./store";
и использовать здесь:

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Спасибо за ответ!