Vue-vuexモジュール化の実現方法

Reactの生態系にreduxがあるように、vueの生態系の一員であるvuexも重要な役割を果たしている.現在、多くの優秀なブログでvuexの原理と基本的な使い方が紹介されているため、本稿ではここでは後述しません.筆者のプロジェクトに基づいて、vuexモジュール化の実現方法を簡単に紹介します.
Vuex入門、これは筆者が閲覧した良い入門文章です.

取付

cnpm install vuex

モジュール処理

srcディレクトリの下にstoreフォルダを追加し、modulesフォルダを追加し、各モジュールのステータス管理ファイルを保存し、actionを追加します.js,getters.js,index.js,mutation.js,types.js
各jsの意味は以下の通りである

types.js内で定数を定義してイベントタイプ

を表す

user.jsは、userコンポーネントで使用されるstate、getters、actions、mutationsを内書きし、最終的に

を統一的に導出する.

getters.js内に元のgettersを書き、属性

を取得する

actions.js内に元のactionsを書くと、プロセスの判断、非同期要求

などの実行する動作である.

index.jsはactionsを組み立てるためのものです.js 、 getters.js 、user.jsの、その後、統一的な導出

を行う
ユーザ情報モジュールを例にuser.jsの内容は以下の通りです.

import types from '@/store/types'

const state = {
  userName : '' || localStorage.getItem("userName"),
  userId: '' || localStorage.getItem("userId"),
  isSignin: false || localStorage.getItem("isSignin"),
  userRole: '' || localStorage.getItem("userRole"),
}

var getters = {
  userName: (state) => state.userName,
  userId: (state) => state.userId,
  isSignin: (state) => state.isSignin,
  userRole: (state) => state.userRole,
  isAdmin(state) {
    return typeof state.userRole != 'undefined' && state.userRole != null && state.userRole.indexOf("ROLE_ADMIN") >=0
  },
  isUser(state) {
    return typeof state.userRole != 'undefined' && state.userRole != null && state.userRole.indexOf("ROLE_USER") >=0
  }
}

const actions = {
  setUserInfo(context, userinfo){
    if(typeof userinfo != 'undefined' && typeof userinfo.userId != 'undefined'
        && typeof userinfo.userName != 'undefined' ){
      context.commit(types.SETUSERINFO,userinfo);
    }
  },
  clearUserInfo(context){
    context.commit(types.CLEAR_USERINFO);
  }
}

const  mutations = {
  [types.SETUSERINFO](state, userinfo){
      state.userName = userinfo.userName;
      state.userId = userinfo.userId;
      state.isSignin = userinfo.isSignin;
      state.userRole = userinfo.userAuthorities;
      localStorage.setItem("userId", userinfo.userId);
      localStorage.setItem("userName", userinfo.userName);
      localStorage.setItem("isSignin", userinfo.isSignin);
      localStorage.setItem("userRole", userinfo.userAuthorities);
  },
  [types.CLEAR_USERINFO](state){
    state.userName = '';
    state.userId = '';
    state.isSignin = false;
    state.userRole = '';
    localStorage.setItem("userId","");
    localStorage.setItem("userName","");
    localStorage.setItem("isSignin", false);
    localStorage.setItem("userRole", '');
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

user.からjsでは,筆者はstate,getters,actions,mutationsを定義した.定義されたステータスstateはvuexのgettersで取得できます.ステータスを操作する場合は、actionsコミットmutations修正ステータスをトリガーします.
type.jsの内容は以下の通りです.

const SETUSERINFO = "SETUSERINFO";//        
const CLEAR_USERINFO = "CLEAR_USERINFO";//      

export default {
  SETUSERINFO,
  CLEAR_USERINFO
}

index.jsの内容は次のとおりです.moduleでは、モジュール化管理ステータスを許可します.

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)

import getters from './getters'
import actions from './actions'
import mutations from './mutations'
import user from './modules/user'

export default new vuex.Store({
  getters,
  actions,
  mutations,
  modules: {
    user
  }
})

他のjsではまだ使用されていないため、リストされていません.

導入
メールでjsに導入

import store from './store/index'

new Vue({
  el: '#app',
  router,
  i18n,
  store,
  components: { App },
  template: ''
})

を使用
前の準備が完了すると、コンポーネントで使用できます.
ユーザーが管理者かどうかを取得するには、管理者が管理メニューを表示します.

    {{ $t("menuName.caseManage") }}

ログイン後にユーザの情報を設定するなど、ステータスを変更し、他のコードにログインすることはここで省略します.

 var userinfo = response.data.result;
 userinfo.isSignin = true;
 this.$store.dispatch("setUserInfo", userinfo);

まとめ

本稿では,プロジェクトにおけるモジュール化管理状態の場合,統合構成管理が我々の共同開発に役立つだけでなく,コードの可読性の向上にも役立つことを簡単に紹介した.