vuex的使用以及在项目中的配置
Posted haishen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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) // 改变
以上是关于vuex的使用以及在项目中的配置的主要内容,如果未能解决你的问题,请参考以下文章