Javascript 即使vuex存储已更新，Nuxtjs页面也不会更新

这是我的代码：

~/store/state.js

export default () => ({
    selectLanguage: 'fr'
  })

export default {
    switchToFr (context) {
      context.commit('switchToFr')
    },
    switchToEn (context) {
      context.commit('switchToEn')
    }
  }

export default {
  switchToFr (state) {
    state.selectLanguage = 'fr'
  },
  switchToEn (state) {
      state.selectLanguage = 'en'
  }
}

<b-dropdown-item :value="'fr'" @click="$store.dispatch('switchToFr')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-france-48.png"/>
                    <div class="media-content">
                        <h3>Français</h3>
                    </div>
                </div>
            </b-dropdown-item>

            <b-dropdown-item :value="'en'" @click="$store.dispatch('switchToEn')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-great-britain-48.png"/>
                    <img width='30px' height='30px' src="~/assets/img/icons8-usa-48.png"/>
                    <div class="media-content">
                        <h3>English</h3>
                    </div>
                </div>
            </b-dropdown-item>

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
  },
  watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
  },

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
},

watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
},

~/store/actions.js

export default () => ({
    selectLanguage: 'fr'
  })

export default {
    switchToFr (context) {
      context.commit('switchToFr')
    },
    switchToEn (context) {
      context.commit('switchToEn')
    }
  }

export default {
  switchToFr (state) {
    state.selectLanguage = 'fr'
  },
  switchToEn (state) {
      state.selectLanguage = 'en'
  }
}

<b-dropdown-item :value="'fr'" @click="$store.dispatch('switchToFr')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-france-48.png"/>
                    <div class="media-content">
                        <h3>Français</h3>
                    </div>
                </div>
            </b-dropdown-item>

            <b-dropdown-item :value="'en'" @click="$store.dispatch('switchToEn')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-great-britain-48.png"/>
                    <img width='30px' height='30px' src="~/assets/img/icons8-usa-48.png"/>
                    <div class="media-content">
                        <h3>English</h3>
                    </div>
                </div>
            </b-dropdown-item>

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
  },
  watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
  },

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
},

watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
},

~/store/mutations.js

export default () => ({
    selectLanguage: 'fr'
  })

export default {
    switchToFr (context) {
      context.commit('switchToFr')
    },
    switchToEn (context) {
      context.commit('switchToEn')
    }
  }

export default {
  switchToFr (state) {
    state.selectLanguage = 'fr'
  },
  switchToEn (state) {
      state.selectLanguage = 'en'
  }
}

<b-dropdown-item :value="'fr'" @click="$store.dispatch('switchToFr')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-france-48.png"/>
                    <div class="media-content">
                        <h3>Français</h3>
                    </div>
                </div>
            </b-dropdown-item>

            <b-dropdown-item :value="'en'" @click="$store.dispatch('switchToEn')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-great-britain-48.png"/>
                    <img width='30px' height='30px' src="~/assets/img/icons8-usa-48.png"/>
                    <div class="media-content">
                        <h3>English</h3>
                    </div>
                </div>
            </b-dropdown-item>

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
  },
  watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
  },

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
},

watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
},

~/layouts/inside.js

export default () => ({
    selectLanguage: 'fr'
  })

export default {
    switchToFr (context) {
      context.commit('switchToFr')
    },
    switchToEn (context) {
      context.commit('switchToEn')
    }
  }

export default {
  switchToFr (state) {
    state.selectLanguage = 'fr'
  },
  switchToEn (state) {
      state.selectLanguage = 'en'
  }
}

<b-dropdown-item :value="'fr'" @click="$store.dispatch('switchToFr')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-france-48.png"/>
                    <div class="media-content">
                        <h3>Français</h3>
                    </div>
                </div>
            </b-dropdown-item>

            <b-dropdown-item :value="'en'" @click="$store.dispatch('switchToEn')" aria-role="listitem">
                <div class="media">
                    <img width='30px' height='30px' src="~/assets/img/icons8-great-britain-48.png"/>
                    <img width='30px' height='30px' src="~/assets/img/icons8-usa-48.png"/>
                    <div class="media-content">
                        <h3>English</h3>
                    </div>
                </div>
            </b-dropdown-item>

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
  },
  watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
  },

data () {
    return {
      activeLanguage: this.$store.state.selectLanguage,
    }
},

watch: {
    activeLanguage: function() {
      console.log(this.activeLanguage)
    }
},

问题：

在layout.js中，当我切换语言时，数据activeLanguage会发生变化，手表会生成新值的console.log

->没关系

在project.js中，它不起作用，我必须更改页面并返回页面，以便在数据中具有新的存储值

->很糟糕

有人知道如何使用project.js来使用与layout.js相同的组件吗？

---

谢谢你

我很惊讶

activeLanguage

在

layout.js

中为您做了更改。当组件被创建并且字符串不可变时，

data

函数只运行一次，因此当存储区中的

selectLanguage

值发生更改时，

layout.js

中的

activeLanguage

不会被选中

您应该从

计算的

函数中获取状态值，而不是按照

像这样的事情应该可以做到：

  computed: {
    activeLanguage () {
      return this.$store.state.selectLanguage
    }
  }

有关简短版本，请参阅