Vuex状态管理（报警信息数量跟随变化）

最新推荐文章于 2024-06-12 11:13:48 发布

Pinia_0819

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量530

点赞数 11

分类专栏： vue 项目功能文章标签： vue 前端

本文链接：https://blog.csdn.net/weixin_50466102/article/details/135250325

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

项目功能

4 篇文章 0 订阅

订阅专栏

需求：侧边栏显示报警信息数量

在store/project.js文件中定义相关状态

// 存储项目信息
const projectInfo = JSON.parse(sessionStorage.getItem('projectInfo')) ? JSON.parse(sessionStorage.getItem('projectInfo')) : '';
import { getUntreatedProjectAlarm } from '@/api/managealarm'
const state = {
    projectInfo: projectInfo,
    // 菜单按钮是否展开
    launch: true,
    // 报警信息数量
    alarmNumber: 0
}

const mutations = {
    SET_PROJECT_INFO: (state, projectInfo) => {
        state.projectInfo = projectInfo
        sessionStorage.setItem('projectInfo', JSON.stringify(projectInfo))
    },
    SET_LAUNCH: (state) => {
      state.launch = !state.launch
    },
    SET_ALARMNUMBER: (state, alarmNumber) => {
      state.alarmNumber = alarmNumber
    },
}

const actions = {
    setProject({commit}, projectInfo) {
        commit('SET_PROJECT_INFO', projectInfo)
    },
    getAlarmNumber({ commit }) {
      return new Promise(() => {
        let params = {
          page: 1,
          rows: 500,
          alarmType: '',
          startDate: '',
          endDate: '',
          everconfirmed: '',
          projectId: state.projectInfo.id
        }
        getUntreatedProjectAlarm(params).then((res) => {
          let alarmNumber = res.total;
          commit('SET_ALARMNUMBER', alarmNumber)
        })
      })
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

在侧边栏Sidebar.vue页面中调用

<el-badge :value="alarmNumber" class="item custombge">
    {{ subItem.name }}
</el-badge>
computed: {
	//使用计算属性，如果其他页面更改了状态（数量）那么它也更这变化
    alarmNumber() {
      return this.$store.state.project.alarmNumber;
    }
  },  
mounted() {
  // 页面加载后调用store里面的action方法获取数据
  this.$store.dispatch("project/getAlarmNumber");
},

在报警信息alarm.vue页面中

<el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <div>
              <el-button v-if="scope.row.everconfirmed == 0" type="primary" size="mini" @click="isTrue(scope.row.id)">确认</el-button>
              <el-button v-else type="info" size="mini" @click="isTrue(scope.row.id)">取消</el-button>
            </div>
          </template>
</el-table-column>
methods: {
    // 点击确认、取消按钮调用此方法
    isTrue(val) {
      let params = {
          ids: [val]
      }
      batchUpdateProjectAlarmState(params).then((res) => {
      	//获取页面数据
        // this.search();
        //重新更新报警信息数量
        this.getAlarmNumber();
      })
    },
    getAlarmNumber() {
      this.$store.dispatch("project/getAlarmNumber");
    },
  }

提示

javascript 一般调用mutations中的方法是使用commit 例如 this.$store.commit("project/SET_LAUNCH") 一般调用actions 中的方法是使用dispatch 例如 this.$store.dispatch("project/getAlarmNumber");

结果截图：
在这里插入图片描述