how to get value from store in vue 3

Issue

I want to get the store value in vue 3 setup code, I am doing like this way right now, first define the store in setup code block:

const store = useStore()

then try to using this code to get the store value:

const transWord = computed(() => store.state.word)

but the result looks like this:

seem not the string which I want. The store index.ts define like this:

import Vuex from 'vuex';
import Trans from '@/store/modules/trans';

export default new Vuex.Store({
    modules: {
        Trans
    }
})

and the trans define like this:

const SET_USER_NAME = "SET_USER_NAME";
const SET_TRANS_WORD = "SET_TRANS_WORD";
const SET_RANDOM_IMG = "SET_RANDOM_IMG";

export default {
  namespaced: true,

  state: {
    username: "Tom",
    word: "",
    randomImg: "",
  },

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

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

  actions: {
    async setUsername({ dispatch, commit, getters }: any, data: unknown) {
      commit("SET_USER_NAME", data);
    },
    async setTransword({ dispatch, commit, getters }: any, data: unknown) {
      commit("SET_TRANS_WORD", data);
    },
  },
};

What should I do to get the store value word? Am I missing something?

Solution

computed() returns a ref, which contains the value in its value property:

const transWord = computed(() => store.state.word)
                        👇
console.log(transWord.value)

Answered By - tony19