vue中操控store中的状态值去控制跳转页面中的展示与隐藏

最新推荐文章于 2025-04-21 10:11:16 发布

贝塔贝卡贝

最新推荐文章于 2025-04-21 10:11:16 发布

阅读量743

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/112700967

本文展示了在Vue.js应用中使用Vuex进行状态管理的一个实例。在List页面，‘List页面吧啦啦不显示’是隐藏的，跳转到EditeList页面后变为显示。当从EditeList页面返回List页面时，该内容再次隐藏。通过Vuex的state、mutations和actions，实现了页面间状态的同步和切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在list页面----》“List页面吧啦啦不显示” 是隐藏状态，
list跳转到EditeList页面，EditeList页面中------》“EditeList页面吧啦啦显示” 是显示状态。
再从EditeList页面跳转到List页面，List页面-----》“List页面吧啦啦不显示” 是隐藏状态

List页面：
在这里插入图片描述

<template>
  <div class="list">
      <h3>我是List页面</h3>
      <p v-if="this.$store.state.showBack">List页面吧啦啦不显示</p>
      <el-button type="primary" @click="goEditeListPage">跳转到EditeList页面</el-button>
  </div>
</template>

<script>

export default {
  name: 'List',
  methods:{
    goEditeListPage(){
      this.$router.push({
        name:'EditList'
      })
      this.$store.dispatch('setShowBack', true)
    }
  }
}
</script>

EditeList页面：
在这里插入图片描述

<template>
  <div class="editList">
    <h3>我是EditeList页面</h3>
    <p v-if="this.$store.state.showBack" style="color:red;">EditeList页面吧啦啦显示</p>
    <el-button type="primary" @click="goListPage">跳转到list页面</el-button>

  </div>
</template>

<script>
export default {
  name: 'EditList',
  methods:{
    goListPage(){
      this.$router.push({
        name:'List'
      })
      this.$store.dispatch('setShowBack', false)
    }
  }
}
</script>

以下是关于store的代码写法：
在这里插入图片描述
store/index.js:

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

Vue.use(Vuex)

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins:[
    createPersistedState()
  ]
})

export default store;

store/state.js:

const state = {
  showBack : false
}

export default state;

store/mutations.js:

const mutations = {
  SET_SHOWBACK:(state,showBack)=>{
    state.showBack = showBack;
  }
}

export default mutations;

store/actions.js:

const actions = {
  setShowBack({commit},showBack){
    commit('SET_SHOWBACK',showBack)
  }
}

export default actions;

main.js:
在这里插入图片描述