Zenn
👻

Module 分割された Vuex Store の使い方 | Vue3 + Vuex4

2024/02/23に公開
Vuex
Vue 3
tech

Vuex において Store を Module で分割する方法

Vuex における Modules と書き方

Modules とは、Store をファイルで分割する機能. これにより、Store を管理しすくすることができる.
例えば、Store のデータを user と device という種類に分けたとき、次のように分割できる.

./store
    ├ modules
        ├ user.js
        └ device.js
    └ index.js

./store/index.js

index.js
import { createStore } from 'vuex';
import user from './modules/user';
import device from './modules/device';

export default createStore({
  modules: {
    user, device,
  },
});

./store/modules/user.js, device.js

user.js の例. device.js も同様に.

user.js
const getDefaultState = () => ({
  lastUsed: null,
});

export default {
  namespaced: true,
  state: getDefaultState(),
  mutations: {
    lastUsed(state, value) {
      state.lastUsed = value;
    },
  },
  getters: {
    lastUsed(state) {
      return state.lastUsed;
    },
  },
  actions: {
    lastUsedReset(context) {
      context.commit('lastUsed', '');
    },
  },
};

使い方

Module 下のキーへのアクセスを表現するには、
"<module-name>/<key>"とスラッシュで区切る.
以下の<target>は上記のように表現された文字列である.

mutations → commit('<target>' [, arg])

SampleComponent.vue
const value = 'hogehoge';
this.$store.commit('user/lastUsed', value);

getters → getters['<target>']

SampleComponent.vue
this.$store.getters['user/lastUsed'];

actions → dispatch('<target>' [, arg])

SampleComponent.vue
this.$store.dispatch('lastUsedReset');

参考

https://vuex.vuejs.org/ja/guide/structure.html

追記

2024.04.08 使い方: commit と actions において、引数を複数とることは不可.

Discussion