Vuex在created生命周期钩子中获取username返回[__ob__: Observer]而非预期字符串的问题求助

你遇到的核心问题其实是 Vuex 里的username是异步赋值的（比如从后端接口拉取、或其他异步逻辑设置），但组件created钩子执行时，这个异步操作还没完成——此时你拿到的只是 Vue 响应式系统包装后的 Observer 对象（对应 state 里初始的空字符串）。setTimeout能生效，是因为它把代码推迟到了下一轮事件循环，这时候异步操作已经完成，state 也更新了，自然能拿到真实值。

下面给你几个更优雅的解决方案，完全不需要依赖setTimeout：

方案一：用watch监听username的变化 #

直接在组件里监听username这个 getter，当它从空字符串更新为真实值时，同步到输入框绑定的变量：

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const AccountGetter = namespace('account').Getter
const AccountAction = namespace('account').Action

const AppProps = Vue.extend({
  data: () => {
    return {
      usernameField: ''
    }
  },
  created() {
    // 先把当前 getter 的初始值赋值过去，后续 watch 会自动处理更新
    this.usernameField = this.username
  },
  methods: {
    async usernameUpdate() {
      await this.updateUserProfile({ username: this.usernameField })
    }
  }
})

export default class VerifyGame extends AppProps {
  @AccountGetter username!: string;
  @AccountAction updateUserProfile!: (payload: { username: string }) => Promise<void>;

  @Watch('username')
  onUsernameChange(newVal: string) {
    this.usernameField = newVal
  }
}
</script>

方案二：用计算属性直接绑定（最简洁） #

既然username是 Vuex 的 getter，本身就是响应式的，你可以直接把输入框的v-model绑定到一个带读写逻辑的计算属性上，不用额外维护 data 变量：

<template>
  <form @submit.prevent>
    <input type="text" v-model="usernameField" />
    <button @click="usernameUpdate()"> Submit </button>
  </form>
</template>

<script lang="ts">
import { Vue, Component, Computed } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const AccountGetter = namespace('account').Getter
const AccountAction = namespace('account').Action

export default class VerifyGame extends Vue {
  @AccountGetter username!: string;
  @AccountAction updateUserProfile!: (payload: { username: string }) => Promise<void>;

  @Computed({ get: true, set: true })
  get usernameField() {
    return this.username
  }
  set usernameField(newVal: string) {
    // 这里可以直接触发更新，也可以留到 submit 方法里处理
  }

  async usernameUpdate() {
    await this.updateUserProfile({ username: this.usernameField })
  }
}
</script>

这个方案的优势是完全不用手动处理同步，计算属性会自动响应 Vuex state 的变化，输入框的初始值会随着username的异步更新自动刷新。

方案三：等待异步初始化完成后再赋值 #

如果你的 Vuex 里是通过某个 action（比如fetchUserProfile）来初始化username的，那可以在组件created钩子中等待这个 action 完成后再赋值：

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const AccountGetter = namespace('account').Getter
const AccountAction = namespace('account').Action

const AppProps = Vue.extend({
  data: () => {
    return {
      usernameField: ''
    }
  },
  async created() {
    // 等待用户信息初始化完成
    await this.fetchUserProfile()
    // 此时 username 已经是真实值了
    this.usernameField = this.username
    console.log(this.username) // 直接输出目标字符串
  },
  methods: {
    async usernameUpdate() {
      await this.updateUserProfile({ username: this.usernameField })
    }
  }
})

export default class VerifyGame extends AppProps {
  @AccountGetter username!: string;
  @AccountAction updateUserProfile!: (payload: { username: string }) => Promise<void>;
  @AccountAction fetchUserProfile!: () => Promise<void>;
}
</script>

补充：为什么console.log会输出[__ob__: Observer]？ #

这是 Vue 响应式系统的特性——所有响应式数据都会被包装成 Observer 对象。你可以用console.log(JSON.parse(JSON.stringify(this.username)))临时查看真实值，但本质问题还是异步更新的时机问题，上面的方案已经从根源解决了这个问题。

内容的提问来源于stack exchange，提问作者Mark