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

问题描述

我一直在研究vuex模块，然后发现我可以尝试根据需要创建任意多个模块（dir），并将动作，获取器，突变和状态分离到不同的文件中。

我的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,mutations
}

store / index.js

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

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

main.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']
  }

解决方法

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

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