通过 VUE 3 中的商店创建组件时更新数据

Question

我是 Vue 的新手，我遇到了下一个问题：我需要更新 header 中的一些文本，并且我想在加载新组件时使用商店更新此文本。问题是我没有看到反映的变化。我的代码是下一个：

// 存储

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    pageTitle: ''
  },
mutations: {
    setPageTitle (state, title) {
      state.pageTitle = title
    }
  },
getters: {
    getPageTitle (state) {
      return state.pageTitle
    }
  }

// header

<template>
...
<li><a href="#" disabled="true" class="header-title">{{ title }}</a></li></ul>
...
</template>
<script>
export default {
  name: 'TheHeader',
  data () {
    return {
      title: this.$store.getters.getPageTitle
    }
  } ...
</script>

// 另一个任意组件

<script>
export default {
  name: 'MainContainer',
  data () {
    return {
      title: 'Main container'
    }
  },
  beforeMount () {
    this.$store.commit('setPageTitle', this.title)
  }
}

知道为什么在挂载新组件时 header 值没有改变吗？谢谢！

Answer 1

它不起作用，因为头组件的 data() 函数在创建组件时仅被调用一次 - 此时 title 属性被初始化为当前值共 this.$store.getters.getPageTitle.

以后更改商店时，更改对title没有影响。不要将 title 放在 data() 中，而是创建一个 computed

export default {
  name: 'TheHeader',
  computed: {
    title() {
      return this.$store.getters.getPageTitle
    }
  }

通过 VUE 3 中的商店创建组件时更新数据

Update data when component creates via store in VUE3

typescript

vue.js

vuex