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)       // 改变