vue.jsインスタンスデータがvuexストアを参照するときに見つかりません

私はデータストアにデータを格納するためにdjango-restバックエンドへのapi呼び出しを使用しようとしています。 api-callは正常に動作しているようです。vue.jsインスタンスデータがvuexストアを参照するときに見つかりません

index.htmlの読み込み後、私はstore_.state.productsとv.$store.state.productsの両方を見ることができ、どちらもAPIからの私のjson応答があるようです。あなたはindex.htmlに移動した後、ここコンソールであることを確認することができます。

と

ただし、v.$dataあなたが表示されますが、空に見ることができるように。

私のコードの下に見つけてください。

products.js

//api get call 
Vue.use(VueResource) 

function get(url, request) { 
    return Vue.http.get(url, request) 
     .then((response) => Promise.resolve(response)) 
     .catch((error) => Promise.reject(error)) 
    } 

//data store 
const apiRoot = 'http://127.0.0.1:8000/api/product-list/?format=json' 
const store_ = new Vuex.Store({ 
    state: { 
     products: [] 
    }, 
    mutations: { 
     'GET_PRODS': function (state, response) { 
      state.products = response.body; 
     }, 
     'API_FAIL': function (state, error) { 
     console.error(error) 
     }, 
    }, 
    actions: { 
     getProducts (store) { 
      return get(apiRoot) 
     .then((response) => store.commit('GET_PRODS', response)) 
     .catch((error) => store.commit('API_FAIL', error)) 

     } 
    } 

}) 

//products component 
Vue.component('product', { 
    template: "#product-template", 
    props: ['product'], 
    delimiters: ["[[","]]"], 
}) 

//root instance 
const v = new Vue({ 
    el: '#app', 
    store: store_, 
    data : function() { 
     return { 
     //this works fine as expected with hardcoded objects fed as data 
     //products : [ 
     //{ 
     // id:1, 
     // name:'test', 
     // brief:'descrip', 
     //}, 
     //{ 
     // id:2, 
     // name:'other', 
     // brief:'something else', 
     //} 
     //] 
     products : this.$store.state.products 
      }; 
    }, 
    delimiters: ["[[","]]"], 
}) 

//populate store.state.products with api-call 
v.$store.dispatch('getProducts')

index.htmlを

<!DOCTYPE html> 
<html> 
    <head> 
    {% load static %} 
    <link rel="stylesheet" href="{% static '/products/bootstrap.css' %}" /> 
    <link rel="stylesheet" href="{% static '/products/bootstrap-theme.css' %}" /> 
    <link rel="stylesheet" href="{% static '/products/base.css' %}" /> 
    <link rel="stylesheet" href="{% static '/products/index.css' %}" /> 
    <link rel="shortcut icon" href="{% static '/products/favicon.ico' %}" 
     type="image/x-icon" /> 
    </head> 
    <body> 

    <template id="product-template"> 
    <div> 
     <h1>[[ product.name ]]</h1> 
     <h5>[[ product.brief ]]</h5> 
    </div> 
    </template> 

    <div id="app"> 
     <div class="container-fluid"> 
     <div class="row title-row"> 
      <h1 class="title">Products</h1> 
     </div> 
     <div class="row"> 
      <product v-for="product in products" :product="product" :key="product.id"></product> 
     </div> 
     </div> 
    </div> 
    <script src="{% static "products/vue.js" %}"></script> 
    <script src="{% static "products/vue-resource.js" %}"></script> 
    <script src="{% static "products/vuex.js" %}"></script> 
    <script src="{% static "products/products.js" %}"></script> 
    </body> 
</html>

出典

2017-07-27 mburke05

APIが店を移入終了する前に潜在的にデータで製品変数が初期化されます。

代わりにcomputed値を使用してみてください。計算された値は、依存関係が変更されると反応的に更新されます。

//root instance 
const v = new Vue({ 
    el: '#app', 
    store: store_, 
    computed: { 
     products: function() { 
      return this.$store.state.products 
     } 
    }, 
    delimiters: ["[[","]]"], 
})

ただし、プロパティに適切な応答が得られるように、ゲッターを使用してストアにアクセスする必要があります。

出典

2017-07-27 06:12:03 camaulay

返信いただきありがとうございます！計算された私は代わりに次のエラーがスローされている：https://gist.github.com/mburke05/061d1810505d5ec85af8faa530282011 – mburke05

上記の同じ2つのエラーの全体の束は、 'vue.js'の異なる行で参照されています。私は前にスキミングドキュメントから覚えている場合は、 "プロパティまたはメソッド"製品は "定義されていません"エラーはテンプレートの組織的なエラーですが、私は正直なところ分かりません。 – mburke05

vue.jsインスタンスデータがvuexストアを参照するときに見つかりません

答えて

関連する問題