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

冷不防 2022-12-07 04:27 198阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue状态管理vuex

方网站：https://vuex.vuejs.org/zh/ 项目中安装vuex npm install vuex -S 在项目的src目录下新建一个目录s...

我会带着你远行/ 2024年04月20日 08:34/ 0 赞/ 44 阅读

相关【Vue框架】Vuex状态管理

前言在上一篇 [【Vue框架】Vue路由配置 ][Vue_Vue_]结尾时说到store.js，在代码里`new Vuex.Store()`传入了getters对象；本

朱雀/ 2024年03月17日 21:55/ 0 赞/ 72 阅读

相关【Vue】八、Vuex状态管理

后端程序员的vue学习之路一、什么是Vuex？二、5个核心选项 1、state： 2、getters： 3、mut

亦凉/ 2023年10月09日 15:17/ 0 赞/ 47 阅读

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

1.在vuex里面写入 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)

冷不防/ 2022年12月07日 04:27/ 0 赞/ 199 阅读

相关 Vue 状态管理与Vuex

Vuex 是什么？ > Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式

Dear 丶/ 2022年11月03日 04:08/ 0 赞/ 194 阅读

相关 Vue状态管理——Vuex

文章目录 1、序言 2、安装Vuex 3、基本用法 3.1 mutation 3.1.1 提交载荷（Payload）

男娘i/ 2022年08月31日 15:17/ 0 赞/ 285 阅读

相关 Vue 状态管理架构 VueX

VueX 详细介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

超、凢脫俗/ 2022年05月18日 06:09/ 0 赞/ 245 阅读

相关 Vuex状态管理总结

一、什么是 Vuex 1、Vuex 是一个专为 Vue.js 应用程序开发的[状态管理模式][Link 1] 2、Vuex 采用集中式存储和管理应用中所有组件的状态

﹏ヽ暗。殇╰゛Y/ 2021年11月05日 12:56/ 0 赞/ 389 阅读

相关 Vue学习之vuex（vue状态管理）

如果学过vue.js的话，大家一定知道在vue中各个组件之间传值的痛苦，在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新，

电玩女神/ 2021年10月24日 00:31/ 0 赞/ 370 阅读

相关【Vue】学习笔记十：Vuex——状态管理工具

文章目录 Vuex 状态管理是什么？管理什么状态先看一看定义的vuex基本结构

比眉伴天荒/ 2021年09月21日 02:44/ 0 赞/ 298 阅读