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

原文地址：https://www.cnblogs.com/haishen/p/10973390.html