vue、js vue-router 2コンポーネントのデータが更新されない

Question

vue.jsの新機能でSPAを構築しようとしています。基本的には、私のバックエンドから、APIエンドポイントへのエイリアスを持つすべてのルートを定義します。それらの多くは同じコンポーネントを使用しています。データは、router.beforeEachとvue-resourceで取得されます。

私はルートから同じテンプレートを共有する別のルートにナビゲートすると、私のルータービューは更新されません。ここで

は私のコードです：

<script> 

var data = { 
    content: null 
} 

const site = { 
    template:'<div>{{this.title}}</div>', 
    data: function() { 
     return data.content.body 
    } 
} 

const home = { 
    template:'<div>{{this.title}}</div>', 
    data: function() { 
     return data.content.body 
    } 
} 

const routes = [ 
      { path: '/api/12.json', component: home, alias: '/' }, 
      { path: '/api/4.json', component: site, alias: '/projekte' }, 
      { path: '/api/5.json', component: site, alias: '/projekte/projekt-1' }, 
      { path: '/api/7.json', component: site, alias: '/projekte/projekt-2' }, 
      { path: '/api/6.json', component: site, alias: '/projekte/projekt-3' }, 
      { path: '/api/8.json', component: site, alias: '/agentur' }, 
      { path: '/api/9.json', component: site, alias: '/lab' }, 
      { path: '/api/10.json', component: site, alias: '/kontakt' }, 
     ] 

const router = new VueRouter({ 
    routes 
}) 

router.beforeEach((to, from, next) => { 

    Vue.http.get(to.matched[0].path).then((response) => { 

     data.content = response; 
     console.log(data.content); 
     next(); 

    }, (response) => { 

     data.content = { 
      'body': { 
       'title': 'Error 404' 
      } 
     }; 
     next(); 

    }); 
}) 

const app = new Vue({ 
    router 

}).$mount('#app') 

</script> 

Answer 1

あなたdataオブジェクトは、Vueのコンポーネントの一部ではありません。あなたのVueアプリの外で定義されています。

でもあなたのコンポーネントかかわら

- homeとsiteはdata.content.bodyオブジェクトを返しますが、あなたの主なdataオブジェクトは、Vueの反応のシステムの一部ではありません。したがって、そのdataオブジェクトの変更は追跡されません。

あなたがここでそれについての詳細を読むことができます：https://vuejs.org/guide/reactivity.html

はこれが起こらないようにするために、あなたはあなたのコンポーネント自体の一部としてあなたのdataを定義する必要があります。また、this.dataのコンポーネントにアクセスできるルートコンポーネントのmountedフックの一部としてhttpコールを行う必要があります。

あなたは（ほとんど）コンポーネント間dataを共有する必要がある場合は、あなたが全体のVueアプリの共有状態を持つことができますvuexを使用して、状態管理を使用する必要があります。

あなたはここにVuex詳細を読むことができます：http://vuex.vuejs.org/en/intro.html

Answer 2

はここAPIコール用のVUE/VUE-ルータ/ vuex/VUE-リソースの例の作業例です。私は必要なヒントのためにManiに感謝します。

const site = { 
    template:'<div>{{ content.title }}</div>', 
    computed: { 
     content(){ 
      return store.state.routeContent 
     } 
    } 
} 

const home = { 
    template:'<div>{{ content.title }}</div>', 
    computed: { 
     content(){ 
      return store.state.routeContent 
     } 
    } 
} 

const notFound = { 
    template: '<div>{{ content.title }}</div>', 
    computed: { 
     content(){ 
      return store.state.routeContent 
     } 
    } 
} 

const routes = [ 
    { path: '/api/12.json', component: home, alias: '/' }, 
    { path: '/api/4.json', component: site, alias: '/projekte' }, 
    { path: '/api/5.json', component: site, alias: '/projekte/projekt-1' }, 
    { path: '/api/7.json', component: site, alias: '/projekte/projekt-2' }, 
    { path: '/api/6.json', component: site, alias: '/projekte/projekt-3' }, 
    { path: '/api/8.json', component: site, alias: '/agentur' }, 
    { path: '/api/9.json', component: site, alias: '/lab' }, 
    { path: '/api/10.json', component: site, alias: '/kontakt' }, 
    { path: '/*', component: notFound } 
] 

const store = new Vuex.Store({ 
    state: { 
     routeContent: null 
    }, 
    mutations: { 
     routeContent (state, payload) { 
      state.routeContent = payload 
      document.title = payload.title 
     } 
    } 
}) 

const router = new VueRouter({ 
    routes 
}) 

router.beforeEach((to, from, next) => { 

    Vue.http.get(to.matched[0].path).then((response) => { 
     store.commit('routeContent', response.body) 
     next() 

    }, (response) => { 
     console.log(response); 
     errorObject = { 
      'title': 'Error 404' 
     }, 
     store.commit('routeContent', errorObject) 
     next() 

    }); 
}) 

const app = new Vue({ 
    router 

}).$mount('#app')