为什么当我更改存储值时 UI 没有更改

Question

我正在使用 vue 3 "vue": "^3.2.29", + typescript "typescript": "^4.5.5", 开发一个 google chrome 扩展。使用 vuex "vuex": "^4.0.2" 来管理 vue3 状态。当我收到结果时，我使用这样的调度设置值：

chrome.runtime.onMessage.addListener(
    async function(request, sender, sendResponse) {
        if (request.msg === "something_completed") {
            let result = request.data.content
            await dispatch(
              'Trans/setUsername',
              result
              )
        }
    }
);

这是 Trans 商店定义：

const SET_USER_NAME = 'SET_USER_NAME'
const SET_RANDOM_IMG = 'SET_RANDOM_IMG'

export default {
  namespaced: true,

  state: {
    username: 'Tom',
    randomImg: 'https://images.dog.ceo/breeds/bulldog-french/n02108915_8258.jpg',
  },

  getters: {
    getUsername (state: { username: string }) {
      return state.username
    },
    getRandomImg (state: { randomImg: string }) {
      return state.randomImg
    },
  },

  mutations: {
    [SET_USER_NAME]: (state: { username: string }, username: string)=>{
      state.username = username
    },
    [SET_RANDOM_IMG]: (state: { randomImg: string }, randomImg: string)=>{
      state.randomImg = randomImg
    },
  },

  actions: {
    async setUsername ({dispatch, commit, getters}: any, data: unknown) {
        debugger
        commit('GET_USER_NAME', data)
    },
  },
}

并像这样在 vue 3 设置中获取用户名：

 let username = computed(()=>getters['Trans/getUsername'])

在UI中，像这样绑定用户名：

    <span>{{username}}</span>

UI 可以成功呈现默认用户名 Tom，但是当我通过 dispath 更改用户名时，UI 用户名没有改变。我错过了什么吗？我应该怎么做才能解决这个问题？我确定 setusername 函数有效，并使用新值进行提交，但 UI 只是没有刷新。

Answer 1

以这种方式访问 UI 中的商店数据：

    <span>{{$store.state.Trans.username}}</span>

当商店数据改变时它会更新。

为什么当我更改存储值时 UI 没有更改

why the UI did not change when I changed the store value

typescript

vuejs3