web-dev-qa-db-ja.com

Vuexファイルを分割するにはどうすればよいですか？

ミューテーターの数が増えているvuexファイルがありますが、それを別のファイルに分割する正しい方法がわかりません。

私が持っているので：

const store = new Vuex.Store({ vuex stuff })そしてその下に私のメインVueアプリ宣言：const app = new Vue({ stuff })

私はVueコンポーネントで作業してうれしいですが、すでに多くのコンポーネントを持っていますが、これはアプリのトップレベルのものであり、どのように分解するかわかりません。 。

vue.jsvuex
11
daninthemix

より複雑なモジュラーアプリケーション構造を作成せずにVuexファイルを分割したい場合は、アクション、ミューテーション、ゲッターを次のように別々のファイルに分割することも可能だと思います。

_└── src
     ├── assets
     ├── components
     └── store
           ├── store.js
           ├── actions.js
           ├── mutations.js
           └── getters.js
_

store.js

_import Vuex from 'vuex';
import Vue from 'vue';

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

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    someObj: {},
  },
  actions,
  getters,
  mutations,
});
_

actions.js

_const actionOne = (context) => {
  ...
  context.commit('PROP1_UPDATED', payload);
};

const actionTwo = (context) => {
  ...
  context.commit('PROP2_UPDATED', payload);
};

export default {
  actionOne,
  actionTwo,
};
_

mutation.js

_const PROP1_UPDATED = (state, payload) => {
  state.someObj.prop1 = payload;
};

const PROP2_UPDATED = (state, payload) => {
  state.someObj.prop2 = payload;
};

export default {
  PROP1_UPDATED,
  PROP2_UPDATED,
};
_

getters.js

_const prop1 = state => state.someObj.prop1;
const prop2 = state => state.someObj.prop2;

export default {
  prop1,
  prop2,
};
_

...通常のthis.$store.dispatch('actionOne')を使用して、コンポーネント内から何かを実行できます...

14
bigsee

それらを異なるモジュールに分割できます。そうすれば、関連するすべてのミューテーション、ゲッター、状態、およびアクションを別々のファイルに保持できます。ドキュメントは私ができるよりもそれをよりよく説明しています： https://vuex.vuejs.org/en/modules.html

11
Bill Criswell

@ bigsee's fine answer に加えて、index.jsファイルを使用してモジュールをエクスポートする場合：

└── src
    ├── assets
    ├── components
    └── store
          └─ mymodule
              ├── state.js
              ├── actions.js
              ├── mutations.js
              ├── getters.js
              └── index.js

index.js

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {

  state,
  getters,
  mutations,
  actions
}

getters.js

const getData = state => state.data

export {
  getData
}

アクション、ミューテーション、状態ファイルと同様です。

1
bjbk