Nuxt + Vuex - 如何将Vuex模块分解为单独的文件？

Question

在Nuxt文档（here）中，它说'你可以选择将模块文件分解为单独的文件：state.js，actions.js，mutations.js和getters.js。'

我似乎无法找到任何关于如何完成的例子 - 很多将根级别的Vuex商店分解为state.js，actions.js，mutations.js和getters.js，以及单个模块文件，但没有任何关于破坏模块本身的信息。

所以目前我有：

     ├── assets
     ├── components
     └── store
           ├── moduleOne.js
           ├── moduleTwo.js
           └── etc...

而我想拥有的是：

     ├── assets
     ├── components
     └── store
           └── moduleOne
                 └── state.js
                 └── getters.js
                 └── mutations.js
                 └── actions.js
           └── moduleTwo
                └── etc...

试试这个，在/store/moduleOne/state.js我有：

export const state = () => {
    return {
        test: 'test'
    }
};

在/store/moduleOne/getters.js我有：

export const getters = {
    getTest (state) {
        return state.test;
    }
}

在我的组件中，我正在使用$store.getters['moduleOne/getters/getTest']访问它

但是，使用调试器和Vue devtools，似乎在getters文件中无法访问状态 - 它似乎在本地文件中查找状态，因此state.test未定义。

试图从我的state文件导入state.js到我的getters.js文件似乎也不起作用。

有没有人有一个例子说明他们如何设法在Nuxt中像这样破坏商店？

Answer 1

我正在使用nuxt 2.1.0如果你想要这样的东西：

在我的store/index.js

确保你有namespaced：true

import Vuex from 'vuex';
import apiModule from './modules/api-logic';
import appModule from './modules/app-logic';

const createStore = () => {
  return new Vuex.Store({
    namespaced: true,
    modules: {
      appLogic: appModule,
      api: apiModule
    }
  });
};

export default createStore

在moduleOne中

在我的store/api-logic/index.js

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

const defaultState = {
  hello: 'salut I am module api'
}

const inBrowser = typeof window !== 'undefined';
// if in browser, use pre-fetched state injected by SSR
const state = (inBrowser && window.__INITIAL_STATE__) ? window.__INITIAL_STATE__.page : defaultState;

export default {
  state,
  actions,
  mutations,
  getters
}

在我的store/api-logic/getters.js

export default {
  getHelloThere: state => state.hello
}

在模块二中

在我的store/app-logic/index.js

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

const defaultState = {
  appLogicData: 'bonjours I am module Logic'
}

const inBrowser = typeof window !== 'undefined';
// if in browser, use pre-fetched state injected by SSR
const state = (inBrowser && window.__INITIAL_STATE__) ? window.__INITIAL_STATE__.page : defaultState;

export default {
  state,
  actions,
  mutations,
  getters
}

在我的store/app-logic/getters.js

export default {
  getAppLogicData: state => state.appLogicData
}

应用程序中的任何位置

 computed: {
  ...mapGetters({
   logicData: 'getAppLogicData',
   coucou: 'getHelloThere'
 })
},
mounted () {
  console.log('coucou', this.coucou) --> salut I am module api
  console.log('logicData', this.logicData) --> bonjours I am module Logic
}

奖励点

如果你想在模块之间进行通信，例如app-logic中的一个动作，它会触发api-logic中的某些东西。所以app-logic（模块一）到api-logic（模块二）

当您指定root: true时，它将开始查看商店的根目录。

在store/app-logic/actions.js

  callPokemonFromAppLogic: ({ dispatch }, id) => {
    dispatch('callThePokemonFromApiLogic', id, {root:true});
  },

在store/api-logic/actions.js

  callThePokemonFromApiLogic: ({ commit }, id) => {

    console.log('I make the call here')
    axios.get('http://pokeapi.salestock.net/api/v2/pokemon/' + id).then(response => commit('update_pokemon', response.data))
  },

在store/api-logic/index.js添加另一个条目

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

const defaultState = {
  appLogicData: 'bonjours I am module Logic',
  pokemon: {}
}

const inBrowser = typeof window !== 'undefined';
// if in browser, use pre-fetched state injected by SSR
const state = (inBrowser && window.__INITIAL_STATE__) ? window.__INITIAL_STATE__.page : defaultState;

export default {
  state,
  actions,
  mutations,
  getters
}

在store/api-logic/mutations.js添加口袋妖怪突变：p

  update_pokemon: (state, pokemon) => {
    state.pokemon = pokemon
  }

应用中的任何位置：

computed: {
  ...mapGetters({
    bidule: 'bidule',
    pokemon: 'getPokemon'
  })
},
mounted() {
  console.log('bidule', this.bidule)
  this.callPokemonFromAppLogic('1') --> the call 
  console.log('the pokemon', this.pokemon.name) --> 'bulbasaur'
},
methods: {
  ...mapActions({
    callPokemonFromAppLogic: 'callPokemonFromAppLogic'
  }),
}

最后你的Vue devTool应该是这样的:)

和Voilà我希望很清楚。代码示例：

https://github.com/CMarzin/nuxt-vuex-modules

Answer 2

Your issue

在文件中使用default导出以达到预期的效果（除index.js外没有命名导出）

Example

可以直接在Nuxt.js测试套件（https://github.com/nuxt/nuxt.js/tree/dev/test/fixtures/basic/store/foo）中找到一个示例。

如果您运行basic fixture并访问/ store页面，您将看到以下结果

模块本身的“重复”内容只表明分裂值优先（否则getVal不会返回10而99则state.val不会是4而是2）。

store.vue代码：

<template>
  <div>
    <h1>{{ baz }}</h1>
    <br>
    <p>{{ $store.state.counter }}</p>
    <br>
    <h2>{{ getVal }}</h2>
    <br>
    <h3>{{ getBabVal }}</h3>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('foo/bar', ['baz']),
    ...mapGetters('foo/blarg', ['getVal']),
    ...mapGetters('bab', ['getBabVal'])
  }
}
</script>