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

Question

这里是我的代码：

~~ / store / state.js

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

~~ / store / actions.js

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

~~ / store / mutations.js

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

〜/ layouts / inside.js

<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)
    }
  },

~~ pages / projects.js

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相同的外观？谢谢！

Answer 1

[我很惊讶activeLanguage在layout.js中确实为您改变了。 data函数仅在创建组件且字符串不可变时才运行一次，因此当存储中的activeLanguage值更改时，我不希望layout.js中的selectLanguage会被拾取。

您应该从computed函数获取状态值，而不是Vuex docs建议的状态。

类似这样的事情应该可以解决：

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

对于简短版本，请查看mapState。