vuex getters取出的值总是undefined

Question

在我的页面上img死活显示不出来，请指教哪里写的不对，或者实现逻辑有误。

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    欢迎登录
                </p>
                <div class="form-con">
                    <Form ref="loginForm" :model="form">
                        <FormItem prop="username">
                            <Input v-model="form.username" size="large" placeholder="请输入用户名">
                                <Icon :size="16" type="person" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input type="password" size="large" v-model="form.password" placeholder="请输入密码">
                                <Icon :size="14" type="locked" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem prop="verification">
                            <Input v-model="form.verification" size="large" placeholder="请输入验证码">
                                <Icon :size="14" type="social-angular" slot="prepend"></Icon>
                                <a href="javascript: void(0);" @click="refresh" slot="append" title="点击刷新验证码">
                                    <img v-show="captcha" :src="captcha"/>
                                </a>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" size="large" long>登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            form: {
                username: '',
                password: '',
                captchaId: this.$store.getters.captchaId,
                verification: ''
            }
        };
    },
    methods: {
        refresh () {
          this.$store.dispatch('Captcha');
        }
    },
   beforeCreate (){
        this.$store.dispatch('Captcha');
   },
   computed: {
     captcha: function () {
       return this.$store.getters.captcha;
     }
   }
};
</script>

import { login, captcha } from '@/api/users'
import { getToken, setToken, removeToken, setAccess, removeAccess } from '@/utils/auth'

const user = {
  state: {},
  mutations: {
    SET_CAPTCHA_INFO: (state, captchaInfo) => {
      console.log(state);
      state.captchaId = captchaInfo.captchaId;
      state.captcha = captchaInfo.captcha;
    }
  },
  actions: {
    Captcha ({commit}) {
      return new Promise((resolve, reject) => {
        captcha().then(response => {
          const resp = response.data;
          commit('SET_CAPTCHA_INFO', resp.data);
          resolve()
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
};
export default user;

import Vue from 'vue';
import Vuex from 'vuex';

import app from './modules/app';
import user from './modules/user';
import getters from './getters'

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        //
    },
    mutations: {
        //
    },
    actions: {

    },
    modules: {
        app,
        user
    },
    getters
});

export default store;

Answer 1

captchaId: this.$store.getters.captchaId

把这个移动到计算属性里。

Answer 2

先试着在
computed里面写

captchaId: this.$store.getters.captchaId