引用vuex商店時缺少Vue.js實例數據

我正在嘗試使用api調用django-rest後端來填充我的數據存儲。 API調用似乎工作正常。引用vuex商店時缺少Vue.js實例數據

加載後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: ["[[","]]"], 
})

但是，您應該使用getter訪問商店，以確保該屬性正確反應。

來源

2017-07-27 06:12:03 camaulay

感謝您的回覆！與計算我得到拋出，而不是以下錯誤：https://gist.github.com/mburke05/061d1810505d5ec85af8faa530282011 – mburke05

有一大堆的上述相同的兩個錯誤，在'vue.js'不同的行引用;我認爲「財產或方法」產品「沒有定義」錯誤是一個模板組織錯誤，如果我記得早些時候瀏覽文檔，但我真的不確定。 – mburke05

引用vuex商店時缺少Vue.js實例數據

回答

相關問題