VueJs2 mit Geschäften mit Komponenten

Question

Ich benutze Vuejs 2.0 mit Vue-Router und Webpack.

Ich muss Elemente in einer Komponente mit der session-store.js auflisten, die sich im Ordner src/stores befindet, aber ich kann keine Daten aus dem Speicher in App.vue und in meinen Komponenten lesen.

sitzungs 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> 

Wie soll ich es ändern, um die Daten abrufen zu können? und wie die Session-Zeitplan-Komponente aus der Zeitplan-Komponente aufgerufen werden?

Answer 1

Ich denke, dass Sie Vue-Ressource verwenden sollten. (Zwei Gründe: keine jQuery, entwickelt für vue). In meiner Anwendung verwende ich auch vuex die Sie nicht brauchen, denke ich aber die Vue-Ressource würde so aussehen.

in bootstrap.js von app.js (Alternative für main.js) erforderlich I haben:

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

Punkt: verlangen von vue-Ressource fügt http in Vue (js ist so random)

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

Dann in api/devices.js gibt es:

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

* Behalten Sie die URL-Schrägstriche im Auge, da vue-resource den root nur verwendet, wenn Sie keinen Schrägstrich vor dem relativen und nicht nach dem root schreiben.

schließlich in app.js (main.js) es so etwas wie das sein wird.

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()) 
    } 
}) 

In untergeordneten Komponenten Sie api wie diese $ api

Vielleicht habe ich etwas falsch zugreifen würde . Dies ist nur ein Beispiel dafür, wie es funktioniert. Ich bin kein Vue Pro ... noch: D Viel Glück. Btw, wenn Sie sich für vue-Ressource entscheiden, überprüfen Sie ihre Beispiele coz Ich habe Ihnen nur die console.logs