vuex 按需动态引入等常用写法

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）组件写法

<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>

（2）动态引入写法

// 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
});

前端菜鸟一枚，习惯记录平时遇到的一些问题和学习笔记