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

Posted 2021-12-19 haishen

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