vuex 与 组件之间通信

Question

大家帮我看看，我的{{Date.date}}在页面上没有被输出，我知道有data(){}的原因，但是我用的是vuex，要如何才能把值给输出？谢谢

<div id="box">

<my-component></my-component>

</div>

<script type="text/javascript" src="libs/Vue/vue.js"></script>
<script type="text/javascript" src="libs/vuex.js"></script>
<script>

Vue.component('my-component', {
    template:'<div class="location-time">\n' +
    '        <span class="fa fa-location-arrow"></span>&nbsp;<span class="city">北京</span>\n' +
    '        <span class="data">{{Date.date}}</span>\n' +
    '    </div>'
})
const localDate = new Vuex.Store({
    state: {
        message: {}
    },
    mutations: {
        get: function (state) {
            var url="https://free-api.heweather.com/v5/weather?city=beijing&key=f13a4900e81247fc8992723e78b3036d";
            $.get(url,function(dt){
                state.message = dt.HeWeather5[0].daily_forecast[0];
                console.log("今日日期",state.message)
            })
        }
    }
});
new Vue({
    el: '#box',
    date:{

    },
    computed: {
        Date:function () {
            return localDate.state.message
        }
    },
    methods: {
        date () {
            localDate.commit('get')
        },
    },
    mounted:function () {
        this.date();
    }
})

</script>

Answer 1

你用 vuex 生成了一个 store 实例，为什么不注入到 Vue 实例。

...
new Vue({
    el: '#box',
    store: localDate,
    date:{

    },
    computed: {
        Date:function () {
            return this.store.state.message
        }
    },
    methods: {
        date () {
            this.store.commit('get')
        },
    },
    mounted:function () {
        this.date();
    }
})

Answer 2

目前有一个方案实现了效果，就是吧下边的方法全部挪到组件里，就能输出了

Answer 3

为什么不写单文件的形式