vue学习经验总结（vuex状态管理）

最新推荐文章于 2022-09-29 16:23:08 发布

不及0908

最新推荐文章于 2022-09-29 16:23:08 发布

阅读量205

点赞数 2

文章标签： vue

本文链接：https://blog.csdn.net/huhuhuja/article/details/108592802

版权

1.在vuex里面写入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({

  state: {
    msgStatus:true,     //消息状态
  },
  mutations: {
    changeMessageStatus(state,payload){
      state.msgStatus=payload.status
    }
  }
})

state 针对状态存值（初始值）

mutations 针对页面这个值改变时，调用changeMessageStatus来改变

2.在a页面接口拿到这个消息状态的值，存进vuex中

this.getToken(getinstituteCenterApi,{},(res)=>{
            this.infolist=res.data
            this.newMessage=res.data.newMessage
            this.$store.commit('changeMessageStatus',{'status':this.newMessage==0?false:true})
          })

拿到这个消息的状态，可能为0，可能为1，所用用this.$store.commit来调用vuex中mutations里面的changeMessageStatus方法来改变vuex中的值。

3.在a页面中通过computend方法取到vuex的值，到页面进行状态显示

computed: {
     msgStatus(){
      return this.$store.state.msgStatus;
    }
}

到页面渲染判断：

<span class="mynews"></span><span>我的消息</span><span v-if="msgStatus==1" class="redspan"></span>

4.在b页面，修改vuex中的值，改变消息显示的状态

 this.getToken(getmessagelistApi, this.searchInfo, (res) => {
        this.list=res.data.rows
        if(this.list.filter(item=>item.status==0).length==0){
          this.$store.commit('changeMessageStatus',{'status':false})
        }else{
          this.$store.commit('changeMessageStatus',{'status':true})
        }
        // console.log(this.list)
        this.pagination.total = res.data.count;
      });

当满足条件时，通过mutations里面的changeMessageStatus方法来改变vuex中msgStatus的值