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

Question

在Nuxt文件(在这里),它说,"你可以选择打破模块文件到单独的文件: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

确保您已命名空间：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（模块1）到api-logic（模块2）

指定后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

在 nuxt 版本 2.14^ 中，您不必在商店根 index.js 文件中创建它。

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

但是，您可以将根 index.js 文件保留为默认值或执行您需要的操作。无需导入。

store/index.js

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

export const actions = {
   async nuxtServerInit({ state, commit }, { req }) {
   const cookies = this.$cookies.getAll() 
   ...
}

这是它的样子，非常简单。

文件夹结构

store
 ? auth
 ? utils
 ? posts
 ? ? actions.js
 ? ? mutations.js
 ? ? getters.js
 ? ? index.js
 ? index.js

例子

store/posts/index.js你可以只放状态函数。您不需要导入操作、吸气剂和突变。

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

store/posts/actions.js

const actions = {
  async getPosts({ commit, state }, obj) {
    return new Promise((resolve, reject) => { 
       ...
    }
  }
}

export default actions

store/posts/mutations.js

 const mutations = {
    CLEAR_POST_IMAGE_CONTENT: (state) => {
       state.post_image_content = []
    }
 }
 
 export default mutations

store/posts/getters.js

const getters = {
    datatest: (state) => state.datatest,
    headlineFeatures: (state) => state.headlineFeatures,
}

export default getters

效果与@CMarzin 答案相同，但更清晰