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}} //直接取值