Nuxt.js + Composition APIでVuexのStateをReactiveに使う方法

import axios from 'axios';

const backendURL = 'https://ebook-homebrew.herokuapp.com/';

 //Stateの型を宣言
export default interface State {
  status: string;
  version: string;
}

//State: 先ほど宣言したState型を使ってます
export const state = (): State => ({
  status: '',
  version: '',
});

//Mutation: stateに新しい値をセットするだけ
export const mutations = {
  setStatus(state: State, status: string) {
    state.status = status;
  },
  setVersion(state: State, version: string) {
    state.version = version;
  },
};

//Action: サーバからステータスなどを取得し、mutation経由で値をセット
//Actionなのでasync awaitな非同期な処理もOK
export const actions = {
  async fetchServerInfo({ commit }): Promise<void> {
    await axios.get(backendURL + 'status').then((response) => {
      commit(setStatus, response.data.status);
      commit(setVersion, response.data.version);
    }).catch((err) => {
      commit(setStatus, 'error');
      commit(setVersion, 'error');
    })
  },
};

//Getter: stateの中身を取り出してreturnする
export const getters = {
  getStatus(state: State): string{
    return state.status;
  },
  getVersion(state: State): string{
    return state.version;
  }
};

<template>
  <div id="status">
    <!-- actionの呼び出し(※5) -->
    <b-button id="get-status" type="is-primary" @click="fetchStatus(store)">Get Status NOW</b-button>
    <!-- setupのreturnに設定したものはtemplate内で使える(※6)-->
    <p>ServerStatus: <b>{{ store.getters['status/getStatus'] }}</b></p>
    <p>ServerVersion: <b>{{ store.getters['status/getStatus'] }}</b></p>
  </div>
</template>

<script lang="ts">
  import {
    createComponent,
    reactive,
    onBeforeMount,
    onUpdated,
    SetupContext,
    onMounted,
    computed,
    watch,
    ref
  } from '@vue/composition-api';

  const backendURL = 'https://ebook-homebrew.herokuapp.com/';

  type Props = {
    propHello: string;
  };

  const fetchStatus = async (store) => {
   // store.dispatchでActionを呼び出す
   // setupからstoreを受け取る (※4)
    await store.dispatch('status/fetchServerInfo');
  };

  // createComponentする
  export default createComponent({
    props: {
      propHello: {
        type: String
      }
    },

    //setupを呼び出すとSetupContextのrootでVueインスタンス内の要素にアクセスできる
    setup (props: Props, { root }:SetupContext) {
      // props
      const propsHello = props.propHello;
      
      //storeをVueインスタンスから取り出す(※1)
      const store = root.$store;

      //methods
      onBeforeMount( async () => {
        // 当然setup外で設定した関数にもアクセス可能(※4)
        // 関数内でstoreを使うため引数で渡しておく(※2)
        await fetchStatus(store);
      });


      return {
        fetchStatus,
        store, //storeをtemplate内で利用するためにreturn(※3)
        propsHello,
      };
    }
  });
</script>

import axios from 'axios';

import {
  reactive,
  Ref,
  toRefs,
} from '@vue/composition-api';

const backendURL = 'https://ebook-homebrew.herokuapp.com/';

// Reactiveなstateを作る(7)
export const state = () => { //型について(※9)
  return toRefs(reactive<{ //toRefsでreturnする(※8)
    status: string;
    version: string;
  }>({
    status: '',
    version: '',
  }))
};

export const mutations = {
    setStatus(state: State, status: string) {
    state.status = status;
  },
    setVersion(state: State, version: string) {
    state.version = version;
  },
};

export const actions = {
  async fetchServerInfo({ commit }): Promise<void> {
    await axios.get(backendURL + 'status').then((response) => {
      commit(SET_STATUS, response.data.status);
      commit(SET_VERSION, response.data.version);
    }).catch((err) => {
      commit(SET_STATUS, 'error');
      commit(SET_VERSION, 'error');
    })
  },
};

// 意味わかんないif文。ここが問題点(※10)
export const getters = {
  getStatus(state): string{
    if (state.status.value === '') {
      return '';
    }else{
      return state.status;
    }

  },
  getVersion(state): string{
    if (state.version.value === '') {
      return '';
    }else{
      return state.version;
    }
  }
};

export function toRefs<T extends Data = Data>(obj: T): Refs<T> {
  if (!isPlainObject(obj)) return obj as any;

  const res: Refs<T> = {} as any;
  Object.keys(obj).forEach(key => {
    let val: any = obj[key];
    // use ref to proxy the property
    if (!isRef(val)) {
      val = createRef<any>({
        get: () => obj[key],
        set: v => (obj[key as keyof T] = v),
      });
    }
    // todo
    res[key as keyof T] = val;
  });

  return res;
}

 //Stateの型を宣言
export default interface State {
  status: string;
  version: string;
}

//State: 先ほど宣言したState型を使ってます
export const state = (): State => ({
  status: '',
  version: '',
});

 //Stateの型を宣言
export default interface State {
  status: string;
  version: string;
}

export const state = () => { //型がないよ！！
  return toRefs(reactive<{
    status: string;
    version: string;
  }>({
    status: '',
    version: '',
  }))
};

import {
  reactive,
  Ref,
  toRefs,
} from '@vue/composition-api';

declare type Refs<Data> = { //謎のtype
  [K in keyof Data]: Data[K] extends Ref<infer V> ? Ref<V> : Ref<Data[K]>;
};

export default interface State {
  status: string;
  version: string;
}

export const state = ():Refs<State> => { //Refs<State>が型です
  return toRefs(reactive<State>({
    status: '',
    version: '',
  }))
};

export const getters = {
  getStatus(state): string{ //引数の型ないよー
    if (state.status.value === '') { //謎if文
      return '';
    }else{
      return state.status;
    }

  },
  getVersion(state): string{
    if (state.version.value === '') { //謎・・
      return '';
    }else{
      return state.version;
    }
  }
};