如何将 Vuex 模块化成不同的文件夹和文件

Question

我一直在研究 vuex 模块，然后想我可以尝试创建尽可能多的模块（目录），并将动作、getter、突变和状态分离到不同的文件中。

我的 vuex 结构为：

.
└── src/
    ├── store/
    │   ├── moduels/
    │   │   └── todo/
    │   │       ├── state.js
    │   │       ├── getters.js
    │   │       ├── actions.js
    │   │       ├── mutations.js
    │   │       └── index.js
    │   └── index.js
    └── main.js

州

export const state =  () => {
    return {
        todos: []
    }
}

吸气剂

export const getters = {
    allTodos: (state) => state.todos
}

行动

import axios from 'axios'
import { ALL_TODOS } from "@/store/mutation-types.js";

export const actions =  {
    async getTodos({ commit }){
        let page_url = 'https://jsonplaceholder.typicode.com/todos';
        const res = await axios.get(page_url);
        console.log(res.data);
        commit(ALL_TODOS, res.data)
    }
}

突变

import { ALL_TODOS } from "@/store/mutation-types.js";

export const mutations =  {
    [ALL_TODOS]: (state, todos) => state.todos = todos
}

todo/index.js

import state from './state.js';
import getters from './getters.js';
import actions from './actions.js';
import mutations from './mutations.js';

export default {
    state,
    actions,
    getters,
    mutations,
  };

store/index.js

import Vue from "vue";
import Vuex from 'vuex';
import Todo from './modules/todo';

Vue.use(Vuex)

const createStore = () => {
    return new Vuex.Store({
        namespaced: true,
        modules: {
            Todo
        }
    });
}

export default createStore

src/main.js

import store from './store/index';
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

完成，如果尝试在我的代码中的任何位置使用它，如下所示：

computed: {
  ...mapGetters(['allTodos'])
},
created () {
   this.$store.dispatch('todo/getTodos')
},
methods: {
 ...mapActions(['getTodos']),
}

我得到一个错误 [Vue warn]: Error in created hook: "TypeError: Cannot read property 'dispatch' of undefined"

我也尝试将this.$store.dispatch('todo/getTodos') 更改为this.getTodos，但它不起作用

更新

所以我意识到我的 vue 安装存在问题，我重新安装了它并创建了一个与之前结构相同的新项目，并对代码进行了一些更改，但仍然出现错误 [vuex] unknown action type: todo/fetchTodos

这是我的代码

state 和 getter 同上

actions.js

import axios from 'axios'
import { TODOS } from '../../mutation-type'

export const actions = {
    async fetchTodos(context){
        let page_url = 'https://jsonplaceholder.typicode.com/todos'
        const res = await axios.get(page_url);
        console.log(res.data);

        context.commit(TODOS, res.data)
    }
}

mutations.js

import { TODOS } from '../../mutation-type'

export const mutations = {
    [TODOS]: (state, todos) => state.todos = todos
}

modules/todo/index.js

import state from './state';
import getters from './getters';
import actions from './actions';
import mutations from './mutations';

export default {
    namespace: true,
    state,
    getters,
    actions,
    mutations
}

store/index.js

import { createStore } from 'vuex'
import Todo from './modules/todo';

export default createStore({
  modules: {
    Todo
  }
})

ma​​in.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App).use(store).use(router).mount('#app')

在vue文件中如下：

computed: {
    ...mapGetters({
      todo: 'todo/getTodos'
    })
  },
  created(){
    this.$store.dispatch('todo/fetchTodos')
  },
  methods: {
    ...mapActions['fetchTodos']
  }

Answer 1

您的store/index.js 正在导出createStore 函数，而不是商店本身。您应该执行该函数以获取main.js 中的存储对象，如下所示：

import store from './store/index';
new Vue({
  render: h => h(App),
  store: store()
}).$mount('#app')