状態変更後のレンダリングコンポーネントvue.js

Question

私はNuxtJSとVueJSで作業しています。私は、状態が変更された後に再レンダリングしないコンポーネントに問題があります。

index.jsは

Vue.use(Vuex) 

const state = { 
    productsHome: [], 
    accessToken: {}, 
    collections: {}, 
    product: {}, 
    cart: {}, 
} 

const getters = { 
    productForHomepage (state) { 
    return state.productsHome 
    }, 
    productForPdp (state) { 
    return state.product 
    }, 
    cart (state){ 
    return state.cart 
    } 
} 

const actions = { 
    nuxtServerInit (context) { 
     //good place to set language 
    }, 
    GET_HOME(){ 
     api.getHomepageProducts().then(response => { 
     this.commit('setHomeProducts', response.data) 
     }) 
    }, 
    GET_PDP(sth){ 
     api.findBySlug(this.app.router.history.current.params.slug).then(response => { 
     this.commit('setPDPData', response.data) 
     }) 
    }, 
    ADD_TO_CART(store, id){ 
     api.addToCart(id).then(res => { 
     store.commit('updateCart', res.data) 
     }) 
    } 
    } 

const mutations = { 
    setHomeProducts(state, data){ 
    state.productsHome = data 
    }, 
    setPDPData(state, data){ 
    state.product = data[0] 
    }, 
    updateCart(state, data){ 
    for (var optbox of data) { 
     state.cart[optbox.id] = optbox; 
    } 
    // state.cart.set('iteams', 'count', 1) 
    } 
} 

const createStore =() => { 
    return new Vuex.Store({ 
    state, 
    getters, 
    mutations, 
    actions 
    }); 
} 

export default createStore; 

ファイルとあなたがこれを行うと、これはコンポーネント

​​3210

Answer 1

です：

data() { 
    return { 
     cart: this.$store.state.cart 
    } 
    } 

あなたは、カート状態の値でデータをinitiliseしかし、カートの状態が変わったときに変化し続けることはありません。this JSFiddleのように、1回限りの取引ですお店で

computed: { 
    cart(){ 
    return this.$store.state.cart 
    } 
} 

今たびカートの状態が変化するので、あまりにもあなたのコンポーネントでカートの値は以下となります。あなたが実際に何をしたいのか

は、計算を使用しています。

そしてここJSFiddleはそのためだ。https://jsfiddle.net/craig_h_411/zrbk5x6q/