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。

即使vuex商店已更新，Nuxtjs页面也不会更新

1 个答案: