绑定到外部变量的数据属性对变量更改不反应

Question

我开始在电子商务网站上合并Vue.js(v2.5.17(的一些小东西，但我是Vue的新手，遇到了一些麻烦。由于一些 Laravel 刀片结构，我目前无法选择重构，我必须将此功能的各个部分拆分为不同的组件，并且我在一个 Vue 实例中的数据对另一个实例的事件做出反应时遇到了问题。

这是一个代码笔，其中包含该问题的精简版本：https://codepen.io/jgabrielsen/pen/bxRroM/

为了便于参考，JS：

var cartStore = {
state: {
products: [PRODUCT ARRAY],
active: false
},
}
var cartHeader = new Vue({
el: '#cartHeader',
data: {
products: cartStore.state.products,
},
methods: {
setActiveTrue: function() {
cartStore.state.active = true;
console.log('Show Cart');
},
setActiveFalse:function() {
cartStore.state.active = false;
console.log('Hide Cart');
},          
},
})
var cartPreview = new Vue({
el: '#cartPreview',
data: {
products: cartStore.state.products,
active: cartStore.state.active,
},
methods: {
total: function() {
var sum = 0;
for (var i = 0; i < this.products.length; i++) {
sum += this.products[i][1]
}
return sum
},
},
})

和 HTML

<div class="header">
<a id="cartHeader" @mouseover="setActiveTrue" @mouseout="setActiveFalse">CART({{ this.products.length }})</a>
</div>
<div id="cartPreview" v-show="active">
<ul>
<li v-for="product in products">
<div class="col-80">
{{ product[0] }}
</div>
<div class="col-20" style="text-align:right;">
${{ product[1] }}
</div>
</li>
</ul>
<div class="row">
<div class="col-100" style="text-align:right;">
Total Products: {{ this.products.length }}<br>
Total: ${{ this.total() }}
</div>
</div>
</div>

长话短说，我需要cartPreview实例在将鼠标悬停在实例上时显示cartHeader(基本的弹出效果(。

以下是我目前尝试执行此操作的方法：

• 我有一个var cartStore，其中包含所有购物车预览数据的数组，以及active状态。

• cartPreview有一个数据属性active绑定到cartStore.state.active(默认情况下为 false(and v-show="active"，因此它是隐藏的，直到某些东西将其数据属性active设置为true。

• cartHeader有@mouseover="setActiveTrue"和@mouseout="setActiveFalse"，通过cartStore中的绑定状态来切换cartPreview的active属性。

我可以说mouseover和mouseout事件正在触发，因为cartStore.state.active确实更改为正确true和false，并且控制台记录触发，但cartPreview中的相应数据属性对这些更改没有反应。

我觉得我一定忽略了一些超级简单的东西和/或犯了一些重大的菜鸟错误，但是在仔细研究了我的代码数十次并上下搜索之后，我对为什么它没有反应性感到困惑。

Answer 1

我终于想出了一个解决方案。

cartStore.state.products在cartHeader和cartPreview之间对添加和删除产品做出了反应(我从示例中删除了方法，因为我认为它们不相关(，但cartStore.state.active不是。我能看到的唯一区别是products中的购物车数据存储在一个数组中，而active不是，所以我cartStore.state.active了一个数组：

var cartStore = {
state: {
products: [PRODUCT ARRAY],
active: [ false ]
},
}

。用splice更新了它：

methods: {
setActiveTrue: function() {
this.active.splice(0,1,true);
},
setActiveFalse:function() {
this.active.splice(0,1,false);
},          
},

。并向组件添加了v-show="active[0]"，瞧，它可以工作。