vuex 使用 modules 標准寫法 (vuex模塊化)

以用戶模塊為例

soter 結構

//soter 結構
─store
│  getters.js
│  index.js
│
└─modules
user.js

modules

/store/modules/user.js

/**
 * 用戶信息
 * */
const user = {
    state: {
        userInfo:{},//用戶信息
    },
    mutations: {
        SET_USER_INFO(state, userInfo) {
            state.userInfo = userInfo
        },
    },
    actions: {
        SetUserInfo({commit}, userInfo) {
            commit('SET_USER_INFO', userInfo)
        },
    }
}

export default user

getters

/store/getters.js

/**
 * 全局數據響應寫在這
 * */
const getters = {
    userInfo: state => state.user.userInfo
}
export default getters

store 入口文件

/store/index.js
/**
 * store 總線
 * */

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)
const store = new Vuex.Store({
    modules: {
        user,
    },
    getters,
})

export default store

把store掛載到vue對象上

//引入使用

import store from './store';

store.dispatch('SetUserInfo',{name:'張三'}) //調用

new Vue({
    router,
    store,
    components:{App},
    template:'<App/>'
}).$mount('#app')

　　

取值

{{$store.getters.userInfo}} //響應模式
{{$store.state.user.userInfo}} //直接取值