Vueでラジオボタンの値によって登録一覧のページで色を変えたい

前提

現在Vueで家計簿を作っています。
登録画面で収入と支出をラジオボタンで実装しているのですが、vue-routerで他のページの登録一覧で収入の場合は青に、支出の場合は赤にしたいと思っています。
そのため、配列の中のオブジェクトからラジオボタンの値を取得しv-ifを使い表示させようと考えているのですが、その値の取得方法がうまくいきません。
Vuexを使っています。

実現したいこと

・配列の中のオブジェクトから値を取得したい
・収入を青に、支出を赤にしたい。

該当のソースコード

Vue.js,vuex
1import { createStore } from 'vuex'
2
3export default createStore({
4  state: {
5    count: 0,
6    informations:[],
7  },
8  getters: {
9    getCount: (state) => {
10      return state.informations.length
11    },
12    getAll: (state) => {
13      return state.informations
14    },
15    getColor: (state) => {
16      console.log(state.informations.radio);
17      return state.informations.radio
18    }
19  },
20  mutations: {
21    // 情報を保存
22    save (state, newinformation) {
23      newinformation.id = ++state.count
24      state.informations.push(newinformation)
25    }
26  },
27  actions: {
28  },
29  modules: {
30  }
31})
32

コード

Vue.js
1<template>
2  <div>
3    <h2>登録一覧</h2>
4    <table v-if="noinformations">
5      <tr>
6        <th>日付</th>
7        <th>金額</th>
8        <th>項目</th>
9        <th>手段</th>
10        <!-- <th>memo</th> -->
11      </tr>
12      <tr v-for="information in informations" :key="information.id">
13        <td>{{ information.data }}</td>
14
15        <!-- 収入は青で支出は赤にする -->
16        <td :style="{color: colorBlue}" v-if="colorchange == '収入'">
17          {{ information.money.toLocaleString() }}
18        </td>
19        <td :style="{color: colorRed}" v-else>
20          {{ information.money.toLocaleString() }}
21        </td>
22
23        <td>{{ information.item }}</td>
24        <td>{{ information.payment }}</td>
25        <!-- <td>{{ information.content }}</td> -->
26      </tr>
27    </table>
28    <p v-else>登録は一件もありません</p>
29  </div>
30</template>
31
32<script>
33export default {
34  name: "ListView",
35  data() {
36    return {
37      colorBlue: "blue",
38      colorRed: "red",
39    }
40  }, 
41  computed: {
42    informations() {
43      console.log(this.$store.getters.getAll)
44      return this.$store.getters.getAll
45    },
46    noinformations() {
47      return this.$store.getters.getCount
48    },
49    colorchange() {
50      return this.$store.getters.getColor
51    }
52  },
53}
54</script>

補足情報（FW/ツールのバージョンなど）

package.json
1コード
2```{
3  "name": "mykakeibo-vue.js",
4  "version": "0.1.0",
5  "private": true,
6  "scripts": {
7    "serve": "vue-cli-service serve",
8    "build": "vue-cli-service build",
9    "lint": "vue-cli-service lint"
10  },
11  "dependencies": {
12    "core-js": "^3.8.3",
13    "vue": "^3.2.13",
14    "vue-router": "^4.0.3",
15    "vuex": "^4.0.0"
16  },
17  "devDependencies": {
18    "@babel/core": "^7.12.16",
19    "@babel/eslint-parser": "^7.12.16",
20    "@vue/cli-plugin-babel": "~5.0.0",
21    "@vue/cli-plugin-eslint": "~5.0.0",
22    "@vue/cli-plugin-router": "~5.0.0",
23    "@vue/cli-plugin-vuex": "~5.0.0",
24    "@vue/cli-service": "~5.0.0",
25    "eslint": "^7.32.0",
26    "eslint-plugin-vue": "^8.0.3"
27  }
28}