Vue Vuex: старые данные остаются в течение некоторого времени до изменения вычисленного свойства - PullRequest
Новая
       17

Vue Vuex: старые данные остаются в течение некоторого времени до изменения вычисленного свойства

0 голосов
/ 31 января 2019

Я новичок в vuex и до сих пор использую его.Например, у меня есть product списки в моем состоянии store.Когда я смотрю один product, я звоню axios с этим product.id и фиксирую данные продукта в состоянии currentProduct.Затем, если я просматриваю другой продукт, то страница отображается с состоянием currentProduct, то есть сначала со старыми данными, затем после моих action commits .. затем она обновляется до вновь полученной currentProduct, затем vue меняет мои данные представления на новыеданные.user может ясно видеть, что старые данные заменяются новыми.Но я хочу загрузить страницу только после того, как новые данные будут отправлены на мою state. 

`store.js`

state :{
    productList:{},
    currentProduct:{
     id:'',name:'',price:'','seller'
    }
},
mutations:{
    UPDATE_CURRENT_PRODUCT : (state, data) =>{
     state.currentProduct = Object.assign({},state.currentProduct, data);
    }

},
actions:{
    fetchProducts(){
     const response = fetch...... // logic to fetch product
     commit('UPDATE_CURRENT_PRODUCT', response.data);
    }
}

Моя страница рендеринга:

На этой странице отображаются спискимои продукты 

'productList.vue'

<div v-for="product in productList" @click="viewProduct(product.id)">
    <p>{{product.name}}</p>
</div>

computed(){

    ...mapState(['productList'])

},
methods:{
    viewProduct(product_id){
        this.$store.state.dispatch('fetchProducts', product_id);
    }
}

На этой странице отображается вид этого конкретного продукта 

`product.vue`

<div>
    <p>{{currentProduct.name}}</p>
</div>

computed(){

    ...mapState(['currentProduct'])

}

В моем product.vue отображаются первые старые данные, а затем через некоторое время новые данные заменяют их ...Чего-то не хватает ... Я хочу видеть новые данные напрямую, не видя замены старых данных новыми.Есть ли способ обойти vuex

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Ключевая часть:

Я хочу загрузить страницу только после того, как новые данные будут переданы в мое состояние

Вы хотите, чтобы асинхронные методы следовали каждомуДругой.Есть крутой способ сделать это.

Я полагаю, что в fetchProducts() a axios получить / опубликовать данные.Поскольку axios основан на обещании, вы можете вернуться с ним. 

fetchProducts() {
 return axios.get('/get/some/data')
    .then(r => { // commit and stuff
     })
    .catch(e => { // error handling
     })
}

Тогда вы можете легко сделать это: 

this.$store.state.dispatch('fetchProducts', product_id)
 .then(r=> {if(r){ // get the data from vuex 
 } else { // error
 })
 .catch(e => {});

Тогда диспетчеризация выполняется после логического элемента оси.(Например: если есть две оси, которые должны запускаться последовательно, вы можете вызвать вторую в методе then для first, и это решит проблему.)

Надеюсь, вы понимаете это.:)

0 голосов
/ 31 января 2019

Для этого вы должны использовать async await, чтобы ваш компонент обновлялся только после получения новых данных. 

async fetchProducts(){
    await const response = fetch...... // logic to fetch product
    commit('UPDATE_CURRENT_PRODUCT', response.data);
   }

И то же самое в вашем методе viewProduct.Для получения более подробной информации см. Ниже ссылку (последний пример на странице) https://vuex.vuejs.org/guide/actions.html

...