时间戳

首页 > 解决方案 > Vue：如何更改状态值并在其他页面中使用它并在启动时更改页面结构？

vue.js - Vue：如何更改状态值并在其他页面中使用它并在启动时更改页面结构？

问题描述

login.vue在这个项目中，我们可以通过单击按钮登录login，如果成功，我们可以Lnb.vue看到dashboard.vue

我想如果我这样编码，那么pageSso当1我选中复选框时login.vue，Lnb.vue它不会只显示“帐户”菜单。当我console.log(pageSso)在安装循环中使用时，它显示pageSso的是0. 会有什么问题？

商店/商店.js

export const state = () => ({
    pageSso: 0,
})
export const getters = {
    pageSso: (state) => state.pageSso,
}

export const mutations = {
    setPageSso(state, data) {
        console.log('mutations setPageSso data', data)
        state.pageSso = data
    }
}

export const actions = {
    setPageSso({
        commit
    }, data) {
        console.log('actions setPageSso data', data)
        commit('setPageSso', data)
    },

}

页面/login.vue

<template>
<input
  class="checkbox_sso"
  type="checkbox"
  v-model="sso"
  true-value="1"
  false-value="0" >SSO checkbox
  <button class="point" @click="submit">login</button>
</template>
<script>
  export default {
    data() {
      return {
        sso: '',
      }
    },
    computed: {},
    methods: {
      submit() {
        this.$store.dispatch('store/setPageSso', this.sso)
        //this.$store.dispatch('store/login', data)
      },
</script>

页面/仪表板.vue

<template>
    <div class="base flex">
        <Lnb />
        <div class="main">
            <Gnb />
            <nuxt-child />
        </div>
    </div>
</template>
<script>
    import Lnb from '@/components/Lnb'
    import Gnb from '@/components/Gnb'
    export default {
        components: {
            Lnb,
            Gnb
        },
        mounted() {},
    }
</script>

组件/Lnb.vue

<template>
  <ul>
    <li :class="{ active: navbarState == 7 ? true : false }">
      <a href="/dashboard/settings">
        <img src="../assets/images/ico_settings.svg" alt="icon" /> Settings
      </a>
    </li>
    <li v-show="pageSso != 1" :class="{ active: navbarState == 8 ? true : false }">
      <a href="/dashboard/user">
        <img src="../assets/images/ico_user.svg" alt="icon" />
        Account
      </a>
    </li>
  </ul>
</template>
<script>
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {}
    },
    computed: {
      ...mapState('store', {
        // navbarState: (state) => state.navbarState,

        pageSso: (state) => state.pageSso,
      }),
    },
    mounted() {
      console.log('pageSso ->', this.pageSso);
    },
    methods: {

    },
  }
</script>

标签： vue.jsnuxt.js

解决方案

你的console.log(pageSso)日志0是因为 Lnb.vue 的挂载钩子发生了一次，它发生在组件插入 DOM 时。

你在dashboard.vue的这行无条件地将Lnb插入到DOM中：

<Lnb />

这大概是它的挂载钩子被触发的时候。

您pageSso似乎只有在您触发该submit()方法后才会更改，我猜这会在您提交登录表单时发生。

你的 Lnb.vue 当前总是挂载的。如果您不想在 pageSso 等于 1 之前显示它，请在 dashboard.vue 中添加一个 v-if ，如下所示：

<Lnb v-if="pageSso === 1" />

您目前在 dashboard.vue 中没有 pageSso 变量，您必须从商店中获取它。

注意：v-show注意和v-if指令之间的区别：v-show仅隐藏组件，display: none;而v-if实际上从 DOM 中删除或插入组件。使用v-show，即使您看不到它，组件也会被安装。使用v-if，组件的挂载钩子将在每次条件评估为 时触发true。

推荐阅读