コンポーネントを含むストアを使用するVueJs2

Question

vue-routerとwebpackでvuejs 2.0を使用しています。

src/storesフォルダ内にあるsession-store.jsを使用してコンポーネントをリストする必要がありますが、App.vue内のコンポーネントとそのコンポーネント内のストアからデータを読み取ることができません。

セッションstore.js

import $ from 'jquery' 

var SessionStore = { 
    state: { 
    data: [] 
    }, 
    fetchSessionScheduleData: function() { 
    $.ajax({ 
     url: 'https://www.myapi.com/items', 
     success: function (response) { 
     if (response.data) { 
      SessionStore.state.data = response.data 
     } 
     } 
    }) 
    } 
} 

App.vue

<script> 
import SessionStore from './stores/session-store.js' 

export default { 
    name: 'app', 
    components: { 
    Test 
    }, 
    data() { 
    return { 
     SessionStore: SessionStore.state 
    } 
    }, 
    created: function() { 
    this.fetchData() 
    }, 
    methods: { 
    fetchData: function() { 
     SessionStore.fetchSessionScheduleData() 
    } 
    } 
} 
</script> 

main.js

import './assets/css/materialize.css' 
import './assets/css/oclock-styles.css' 
import './assets/css/styles.css' 

import Vue from 'vue' 
import App from './App' 
import VueRouter from 'vue-router' 

import Hello from './components/Hello.vue' 
import Schedule from './components/Schedule.vue' 

Vue.use(VueRouter) 

const routes = [ 
    { path: '/', component: Schedule }, 
    { path: '/foo', component: Hello }, 
    { path: '/schedule', component: Schedule } 
] 

const router = new VueRouter({ 
    routes // short for routes: routes 
}) 

/* eslint-disable no-new */ 
new Vue({ 
    router, 
    el: '#app', 
    template: '<App/>', 
    components: { App } 
}) 

Schedule.Vue

<template> 
    <div v-once> 
     <h4>{{ formatDate(index) }}</h4> 
     <ul class="collapsible" data-collapsible="expandable"> 
      <session-schedule v-for="log in item" v-bind:item="log"></session-schedule> 
     </ul> 
     </div> 
</template> 


<script> 
export default { 

    name: 'Schedule', 
    data() { 
    return 'Hello' 
    }, 
    methods: { 
    formatDate (date) { 
     var moment = require('moment') 
     var now = moment(new Date()) 
     var sessionDate = moment(date, 'DD-MM-YYYY', true).format() 
     var diff = now.diff(sessionDate, 'd') 
     if (diff === 0) { 
     return 'Today' 
     } else if (diff === 1) { 
     return 'Yesterday' 
     } else { 
     return date 
     } 
    } 
    } 
} 
</script> 

データをフェッチできるようにするにはどうすればよいですか？ と、スケジュールコンポーネントからsession-scheduleコンポーネントを呼び出す方法は？

Answer 1

vue-resourceとしてください。 （2つの理由：vue用に設計されたjQueryはありません）。 私のアプリケーションでは、vuexも使用していますが、vue-resourceはこのように見えます。 app.js（main.jsのための代替）で必要とされるbootstrap.jsで

私が持っている：

window.Vue = require('vue') 
require('vue-resource') 

ポイント：VUE-リソースを必要とVueへhttpを追加します（jsのはとてもランダムです）

export function getDevices() { 
    Vue.http.get('devices').then(response => { 
    console.log(response) 
    }, response => { 
    console.log(response.status) 
    }) 
} 

：

Vue.http.options.root = '//localhost:8000/api/v1' 

はその後APIで/ありdevices.js

* vue-resourceは、相対パスの前にスラッシュを書き込まず、ルートの後もスラッシュを書き込まない場合にのみ、ルートを使用するため、URLスラッシュに注意してください。

最後にapp.js（main.js）にそのような何かがあるでしょう：子コンポーネントで

require('./bootstrap') 

import http from 'vue' 
import * as api from 'api/devices' 

Vue.config.devtools = true 
Vue.config.silent = false 

new Vue({ 
    api, 
    http, 
    el: '#app', 
    created() { 
    console.log(this.api.getDevices()) 
    } 
}) 

あなたはこのようAPIにアクセスします$ APIの

たぶん私は何か間違ったことを書きました。これはどのように動作するかの単なる例です。私はvueプロではない...まだ：D幸運。あなたがvue-resourceを決定したら、その例を確認してください。私はあなたにconsole.logsだけを表示しました。