반응형
vuex 저장소를 참조할 때 Vue.js 인스턴스 데이터가 누락됨
django-rest 백엔드에 API 호출을 사용하여 데이터 스토어를 채우려고 합니다.api-call은 정상적으로 동작하고 있는 것 같습니다.
로드 후index.html둘 다 볼 수 있어store_.state.products그리고.v.$store.state.products둘 다 API에서 제 json 응답을 받은 것 같습니다.이 정보는 콘솔로 이동하여 확인할 수 있습니다.index.html다음과 같습니다.
그리고.
하지만,v.$data비어 있는 것처럼 보입니다.
제 코드 아래를 찾아주세요.
products.displays
//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.displaces를 표시합니다.
<!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>
API가 스토어 입력을 완료하기 전에 데이터의 product 변수가 초기화될 수 있습니다.
대신 계산된 값을 사용해 보십시오.계산된 값은 종속성이 변경됨에 따라 반응적으로 업데이트됩니다.
//root instance
const v = new Vue({
el: '#app',
store: store_,
computed: {
products: function () {
return this.$store.state.products
}
},
delimiters: ["[[","]]"],
})
그러나 getter를 사용하여 스토어에 액세스하여 속성이 적절하게 반응하는지 확인해야 합니다.
언급URL : https://stackoverflow.com/questions/45341254/vue-js-instance-data-missing-when-referencing-vuex-store
반응형
'programing' 카테고리의 다른 글
| 폐지: mysql_connect() (0) | 2022.12.29 |
|---|---|
| Java에서 계수를 계산하는 방법이 있나요? (0) | 2022.12.29 |
| 컨트롤러에서 리다이렉트된 후 Larabel에 오류 메시지 표시 (0) | 2022.12.29 |
| MySQL 쿼리에서 정규식을 수행하는 방법 (0) | 2022.12.29 |
| 왜 이렇게 인쇄가 느리죠?더 빨리 할 수 있나요? (0) | 2022.12.29 |