vuex 商店不更新组件

Posted 2023-02-22

【中文标题】vuex 商店不更新组件

【英文标题】：vuex store doesn't update component

【发布时间】：2017-06-30 18:39:28

【问题描述】：

我是 vue 新手，所以我可能犯了一个菜鸟错误。

我有一个根 vue 元素 - raptor.js：

const Component = 
el: '#app',
store,
data: 
    productList: store.state.productlist
,
beforeCreate: function () 
    return store.dispatch('getProductList', 'getTrendingBrands');
,
updated: function ()
    console.log(111);
    startSlider();

;
const vm = new Vue(Component);

使用这个模板

<div class="grid-module-single popular-products" id="app">
<div class="row">
    <div class="popular-items-slick col-xs-12">
        <div v-for="product in productList">
            ...
        </div>
    </div>
</div>

我的商店很简单 store/index.js:

import Vue from 'vue';
import Vuex from 'vuex';
import model from '../../utilities/model';

Vue.use(Vuex);

export default new Vuex.Store(
state: 
    productlist: []
,
mutations: 
    setProductList(state, data) 
        state.productlist = data;
    
,
actions: 
    getProductList( commit , action) 
        return model.products().then(data => commit('setProductList', data));
    

);

在我的 vuex 开发工具中，我可以看到商店正在更新 https://www.screencast.com/t/UGbw7JyHS3

但我的组件没有更新： https://www.screencast.com/t/KhXQrePEd

问题：

我可以从开发工具中看到我的代码正在运行。商店正在更新数据。但是，我的组件没有更新。我认为只需将其添加到组件的 data 属性中就足够了：

data: 
    productList: store.state.productlist

但显然数据对象似乎没有自动与商店同步。所以要么我在某个地方做了一个完整的 vue no-no，要么我需要稍微调整一下代码。无论如何，任何人都可以帮助我朝着正确的方向前进。

非常感谢。

【参考方案1】：

更新

我自己想出来的。只需要用计算方法替换组件数据部分：

数据：

data: 
  productList: store.state.productlist

并将其替换为。

computed: 
    productList () 
        return store.state.productlist;
    
,

【讨论】：

这种方式有记录吗？

是的，我在文档中找到了解决方案：vuex.vuejs.org/en/state.html

是否需要更换？或者我们可以同时保留data 和computed

是的，您可以像 Vue 文档中的这个示例一样使用两者：vuejs.org/v2/guide/computed.html。示例中使用它来避免 运算符中的大表达式。

我忘记在store 和productlist 之间添加state。感谢@MartinKure！

【参考方案2】：

data 在渲染之前只在组件上工作一次，所以你可以使用 computed 代替。 像上面的答案，或者你可以使用 mapstate

import mapState from 'vuex'
...
computed: mapState(
  productList: state => state.productList
)             

【讨论】：

现在是mapState，大写S。

【参考方案3】：

首先 - 使用 getter 来做到这一点mapGetters，你还需要以某种方式观察这个属性，你可以设置商店订阅或只使用 watch 方法槽组件。

 this.$store.subscribe((mutation, state) =>     
   if (mutation.type === 'UPDATE_DATA') 
      ...
   
 

【讨论】：

嗯..有趣。但是您在哪里订阅更改？在mounted()的组件中？

正确的方法是在created()钩子中使用它，但猜想在mounted中也可以使用

【参考方案4】：

您以错误的方式将 store 调用到 productList 数据属性中。

你可以试试：

data: 
  productList: $store.state.productlist

否则你必须在每个使用 store 的组件中导入 store。