1、store目录下添加Chat.js
const Chat = { state: { path: "222222", token: "", subject: "" }, mutations: { SET_TOKEN: (state,data) => { state.token = data; } }, actions: { /** * this.$store.dispatch('setToken'); */ setToken({ commit, state }, data) { console.log(11111111111111) commit('SET_TOKEN',data); }, } } export default Chat
2、动态引入组件,并且在引入组件前先动态加载vuex模块
(1)简单的动态引入
// 动态注入流程中心模块 if(!this.$store.state.chat) { this.$store.registerModule("flowInfos", require("@/store/chat").default); }
(2)动态引入组件及在组件前引入vuex模块的写法
<el-dialog :visible.sync="$store.state.chatMessageShowState" :append-to-body="true" :close-on-click-modal="false" @close="showBtn(false)" class="el-dialog-chat-unit" > <component :is="ChatMessage"></component> </el-dialog>
// val 是否显示弹窗
showBtn(val){
if(!this.ChatMessage){ let options = { lock: true, text: '正在加载中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.8)', customClass: 'z-index-9999' } let loading = this.$loading(options) // 动态注入模块 this.$store.registerModule("chat", require("./store/chat").default);
// 动态引入组件
this.ChatMessage = () => import('@/views/admin/chatMsg'); let timesIndex = 0; timesIndex = setInterval(()=>{ if($(".ChatMessage").length) { clearInterval(timesIndex) loading.close(); } },200) } this.$store.state.chatMessageShowState = val; if(val) { $("body").addClass("overflow-h"); }else { $("body").removeClass("overflow-h"); }
}
3、页面中vuex的使用:
(1) 简单写法
console.log( this.$store.state.chat ) this.$store.dispatch('setToken');
(2)mapState的写法1
import { mapState } from "vuex"; computed: mapState({ path: (state) => state.chat.path, }), console.log(this.path)
(3)mapState的写法2
import { mapState } from "vuex";
computed: { ...mapState({ socket: (state) => state.chatSocket.socket, }), // 是否显示断网提示语 showTips() { return !this.networkStatus || this.websocketState!=1; // 断网 || 离线状态 }, },
4、全局引入的vuex写法,其中单模块写法同1步骤
(1)store下添加index.js引入全局需要的vuex模块
import Vue from 'vue'
import Vuex from 'vuex'
import cached from './modules/cached'
import keycloak from './modules/keycloak'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
cached,
keycloak,
user
},
getters
})
export default store
(2)getter的写法
// 全局的用法 this.$store.getters.cachedViews const getters = { cachedViews: state => state.cached.cachedViews, userInfor: state => state.user.userInfor, networkStatus: state => state.user.networkStatus } export default getters
(3)main.js里引入
import store from './store' window.vm = new Vue({ el: '#app', router, store, render: h => h(App), config: { productionTip: false }, created() { // 加载完页面就初始化 store.dispatch('setInit'); } })
5、vuex模块中常用写法
(1)举例store下的user.js和chat.js, 其中chat.js中使用user.js的userId
import user from '@/store/user'; actions: { exitCurChat({dispatch, commit, state}) { console.log( user.state.userInfo.id ); // user模块下的state console.log( state.chatId ); // 当前模块下的state commit('EXITCURCHAT'); // 当前模块下的mutations dispatch('clearSendingInterval'); // 全部模块下的actions,所以注意不要同名 } }
(2)Vue.set写法
import Vue from 'vue' Vue.set(state.current, 'isFocus', false);
(3)router写法
import router from '@/router'
router.push("/consult/list");
(4)new Promise写法
(4.1)/api/group.js文件
import request from '@/utils/request' // axios拦截器 export function getGroupNoticeApi(groupId) { return request({ url: GATEWAY_URL + '/group/notice/' + groupId, method: 'get' }) }
(4.2)vuex写法
import { getGroupNoticeApi } from '@/api/group' actions: { // 请求数据 getGroupNotice({ commit, state }, datas) { let { groupId, isRead } = datas; return new Promise((resolve, reject) => { getGroupNoticeApi( groupId ).then(res => { commit('SETGROUPNOTICEDATA',data);
resolve(res)
}).catch(error => {
reject(error)
})
})
}
}
dispatch("getGroupNotice",{ groupId: groupId, isRead: false });