标签：loading val vuex mapState state 引入 path 写法 store

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、动态引入组件之前先加载store

　　　　　　// 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、页面中使用方法：

(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;  // 断网 || 离线状态
    },
  },

标签：loading,val,vuex,mapState,state,引入,path,写法,store
来源： https://www.cnblogs.com/stella1024/p/16329674.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。