Vue：如何更改状态值并在其他页面中使用它并从它开始更改页面结构？

Question

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

我想如果我这样编码然后 pageSso 将是 1 当我在 Lnb.vue 中选中 login.vue 中的复选框时它不会只显示“帐户“ 菜单。当我在安装循环中使用 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>

components/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的mounted hook发生了一次，而且发生在组件插入DOM.[=24=时]

你在dashboard.vue这一行无条件地将Lnb插入DOM:

<Lnb />

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

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

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

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

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

N.B.: 注意 v-show 和 v-if 指令之间的区别：v-show 仅隐藏具有 display: none; 而 v-if 实际上删除或插入组件 from/to DOM。使用 v-show，即使您看不到该组件，它也会被安装。使用 v-if，组件的已安装挂钩将在每次条件评估为 true.

时触发

Vue：如何更改状态值并在其他页面中使用它并从它开始更改页面结构？

Vue: How to change a value of state and use it in other page and change page structure at starting by it?

vue.js

nuxt.js