vue 使用状态管理重新加载局部组件

最新推荐文章于 2024-08-20 09:59:18 发布

青衣浏阳

最新推荐文章于 2024-08-20 09:59:18 发布

阅读量431

点赞数

文章标签： vue elementui vuex

本文链接：https://blog.csdn.net/m0_49016709/article/details/111870969

版权

这里是使用element做的后台管理系统，通过操作来发送请求刷新左侧的菜单栏。

思路：页面添加左侧菜单操作成功后，改变store里changeMenu的状态为true，
左侧菜单组件监听changeMenu,发生改变为true后，发送请求重新获取左侧菜单，
请求成功后修改changeMenu的状态false，菜单栏展示出新添加的菜单。

代码 store 里的定义changeMenu

state: {
	changeMenu:false
},
mutations: {
		SET_CHANGEMENU: (state,changeMenu) => {
			state.changeMenu = changeMenu
		},
	},

代码添加菜单成功之后修改store里changeMenu的状态

 this.$store.commit('SET_CHANGEMENU',true)

代码左侧菜单组件监听changeMenu的状态

computed: {
	  changeMenu(){ //计算属性返回changeMenu的值
		  return this.$store.state.changeMenu
	  }
  },
  watch: {  
	  changeMenu(val){
		  if(val){  //changeMenu的值为true时去请求获取菜单接口
			  this.getList()
		  }
	  }
  },
  methods: {
    getList () {
      getMenu({}).then(res => {
		  if(res.data.response){
			 //请求成功后修改store的状态为false
			  this.$store.commit('SET_CHANGEMENU',false)
		  }
      })
    }
  }