vuex的使用以及在項目中的配置

在main.js文件中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import * as apiConfig from '@/common/api/config'

// vue的自定義屬性，可在vue文件中通過 this.apiConfig 調用
Vue.prototype.apiConfig = apiConfig

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

 

config.js

// export const BASE_ENV = 'pro'
export const BASE_ENV = 'test'

export const ERR_SUCCESS = 2000000 // 成功

export const ERR_FAILURE = 3000000 // 失敗，參數無效

export const ERR_CEASE = 3000001 // 失敗，token失效

export const ERR_ERROR = 5000000 // 錯誤

export const OPEN_LOG = true // 是否開啟日志

 

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

 

store/state.js

/* 內存數據狀態 */
let getUserInfo = () => {
   let userInfo = window.sessionStorage.getItem('userInfo')
   try {
    userInfo = JSON.parse(userInfo)
   } catch (error) {
    userInfo = {}
   }
   return userInfo || {}
    // return {
    //     neteaseToken: '9c40eaa3a566064041d25834fa930bd7',
    //     userId: 'a501'
    // }
}

export default {
    // NIM SDK實例
    nim: null,
    userInfo: getUserInfo(), // 用戶信息 登錄時返回數據
    router_next: false, // 是否阻止路由跳轉
    router_from: {}, // 上一個路由
    NIM_VAR: null, // 網易雲信NIM
    listenEnd: true, // 監聽結束
    im_connect: false, // 網易雲信IM當前是否處於連接狀態
    session_list: null, // 從雲信獲取的會話列表
    use_session_list: [], // 頁面使用的會話列表
    now_consultant_info: {}, // 當前存儲的顧問信息
    audioTimer: null // 語音定時器
}

 

store/mutations.js

export default {
    userInfo (state, userInfo) {
        try {
            window.sessionStorage.setItem('userInfo', JSON.stringify(userInfo))
        } catch (error) {}
        state.userInfo = userInfo
    },
    router_from (state, from) {
        state.router_from = from
    },
    router_next (state, n) {
        state.router_next = n
    },
    SET_AudioTimer (state, object) {
        state.audioTimer = object
    },
    session_list (state, array) {
        state.session_list = array
    },
    use_session_list (state, array) {
        state.use_session_list = array
    },
    now_consultant_info (state, object) {
        state.now_consultant_info = object
    },
    im_connect (state, isConnect) {
        state.im_connect = isConnect
    },
    NIM_VAR (state, object) {
        state.NIM_VAR = object
    },
    listenEnd (state, bool) { // 監聽結束
        state.listenEnd = bool
    }
}

 

 

在js文件中使用vuex

import store from '@/store/index.js'

let status = store.state.im_connect     // 獲取im_connect 

store.commit('im_connect', true)     // 改變im_connect

 

在vue文件中使用vuex

this.$store.state.im_connect              // 獲取

this.store.commit('im_connect', true)       // 改變