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

Question

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

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

store/store.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)
    },

}

pages/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>

pages/dashboard.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>

Answer 1

您的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 时，组件的挂载钩子都会触发。