Vueプロジェクトでvuexを使用する方法

// ユーザー情報を取得する export const QUERY_USER_INFO = "QUERY_USER_INFO"

// ユーザー情報を設定する export const SET_USER_INFO = 'SET_USER_INFO'

'../action-types' から { QUERY_USER_INFO } をインポートします。
'../mutation-types' から { SET_USER_INFO, SET_CUR_MENU_ID } をインポートします。
'@/assets/js/api.js' から api をインポートします。

// 状態を作成する
定数状態 = {
    // ユーザー情報 userInfo: {},
}

// データを非同期的に取得し、ミューテーションにコミットし、ミューテーションによって状態が変化する
定数アクション = {
    /* ユーザー情報を取得する */
    [QUERY_USER_INFO] ({ コミット }, パラメータ) {
        戻り値 api.get({
                URL: '/system/getUser',
            }, params.vm).then(データ => {
                コミット(SET_USER_INFO、データ)
                データを返す
        })

    }

}

const ゲッター = {
    // 現在のユーザー情報 userInfo: state => state.userInfo
}

// 同期的に取得 const 変異 = {
    [SET_USER_INFO] (状態、データ) {
        state.userInfo = データ
    }
}


エクスポートデフォルト{
    州、
    行動、
    ゲッター、
    突然変異
}

「vue」からVueをインポートします
「vuex」からVuexをインポートします
「./modules/base.js」からベースをインポートします。

Vue.js で Vuex をビルドします。

デフォルトの新しいVuex.Storeをエクスポートします({
    モジュール:
        ベース
    }
})

<span>{{$store.getters.userInfo.name}}</span>

'vue' から Vue をインポートします
'./store' からストアをインポートします
'@/store/action-types.js' から { QUERY_USER_INFO } をインポートします。

store.dispatch(QUERY_USER_INFO, {}).finally(() => {
    新しいVue({
        ルーター: ルーター(ストア)、
        店、
        レンダリング: h => h(App)
    }).$mount('#app')
})