引用 vuex 存储时缺少 Vue.js 实例数据答案

【问题标题】：Vue.js instance data missing when referencing vuex store引用 vuex 存储时缺少 Vue.js 实例数据
【发布时间】：2018-01-02 14:53:23
【问题描述】：

我正在尝试使用对 django-rest 后端的 api 调用来填充我的数据存储。 api 调用似乎工作正常。

加载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>

【问题讨论】：

标签： javascript django vue.js vuex

【解决方案1】：

data 中的 products 变量可能在 API 完成填充商店之前被初始化。

尝试改用computed 值。计算值会随着它们的依赖关系的变化而被动更新。

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

但是，您应该使用 getter 来访问存储，以确保该属性正确反应。

【讨论】：

感谢您的回复！计算后我会抛出以下错误：gist.github.com/mburke05/061d1810505d5ec85af8faa530282011
上面有一大堆相同的两个错误，在 vue.js 的不同行引用；如果我记得之前浏览过的文档，我认为“属性或方法“产品”未定义”错误是一个模板组织错误，但老实说我不确定。