vue中狀態管理vuex的使用分享

一、main.js中引入 store

 import store from './store'

  window.HMO_APP = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount('#app-box')
  

二、新建store文件夾

  index.js為入口js文件

　　

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



三、新建user.js文件夾，用戶保存信息

 

user.js文件

import $ajax from '../../utils/fetch'
const user = {
  state: {
    info: '', // 用於保存用戶信息
 
  },

  mutations: {
    SET_USER_INFO: (state, info) => {
      state.info = info
    },
    
  },

  actions: {
    setUserInfo ({commit}, info) {
      commit('SET_USER_INFO', info)
    },
    loginBySession ({commit, state, dispatch}) {
      return new Promise((resolve, reject) => {
        $ajax.get('/denglujiekou', data => {
          dispatch('setUserInfo', data)
          resolve(data)
        }, err => {
          reject(err)
        })
      })
    },
  
  }
}

export default user

 

四、新建getter.js文件夾，用戶獲取狀態管理里面的信息

 

const getters = {
  userInfo: state => state.user.info,

}
export default getters

五、js中使用store方法

 

import store from '../store/index'

store.getters.idInfo