jjzjj

javascript - vuex store 不更新组件

coder 2024-05-09 原文

我是 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 devtool 中，我可以看到商店正在更新 https://www.screencast.com/t/UGbw7JyHS3

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

问题:

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

data: {
    productList: store.state.productlist
}

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

非常感谢。

最佳答案

更新

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

数据:

data: {
  productList: store.state.productlist
}

并将其替换为。

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

关于javascript - vuex store 不更新组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42192855/

javascriptstorecodesectionproductlistvuex

有关javascript - vuex store 不更新组件的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  3. objective-c - 在设置 Cocoa Pods 和安装 Ruby 更新时出错 - 2

    我正在尝试为我的iOS应用程序设置cocoapods但是当我执行命令时:sudogemupdate--system我收到错误消息:当前已安装最新版本。中止。当我进入cocoapods的下一步时:sudogeminstallcocoapods我在MacOS10.8.5上遇到错误:ERROR:Errorinstallingcocoapods:cocoapods-trunkrequiresRubyversion>=2.0.0.我在MacOS10.9.4上尝试了同样的操作，但出现错误:ERROR:Couldnotfindavalidgem'cocoapods'(>=0),hereiswhy:U

  4. ruby-on-rails - Rails Associations 的更新方法是什么？ - 2

    这太简单了，太荒谬了，我在任何地方都找不到关于它的任何信息，包括API文档和Rails源代码:我有一个:belongs_to关联，我开始理解当您没有关联时您在Controller中调用的正常模型方法与您有关联时调用的方法略有不同。例如，我的关联在创建Controller操作时运行良好:@user=current_user@building=Building.new(params[:building])respond_todo|format|if@user.buildings.create(params[:building])#etcetera但我找不到关于更新如何工作的文档:@user

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby-on-rails - OSX Yosemite 更新破坏了 pow.cx - 2

    升级到OSXYosemite后，我现有的pow.cx安装不起作用。升级到最新的pow.cx无效。通过事件监视器重新启动它也没有成功。 最佳答案 卸载(!)并重新安装解决了这个问题。curlget.pow.cx/uninstall.sh|shcurlget.pow.cx|sh 关于ruby-on-rails-OSXYosemite更新破坏了pow.cx，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/q

  7. ruby - 将 Gitlab 从 9.3.7 更新到 9.3.8 安装 re2 时出错 - 2

    我们在Ubuntu14.04和Gitlab9.3.7上运行，运行良好。我们正在尝试更新到Gitlabv9.3.8的最新安全补丁，但它给我们这个错误:Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension.currentdirectory:/home/git/gitlab/vendor/bundle/ruby/2.3.0/gems/re2-1.0.0/ext/re2/usr/local/bin/ruby-r./siteconf20170720-19622-15i0edf.rbextconf.rbcheckingformain(

  8. ruby-on-rails - Rails 更新属性 - 2

    我遇到了以下问题。我有一个名为user的模型，它有一个名为activated的列。我试图通过激活的方法更新该值？但它给我错误:验证失败:密码不能为空，密码太短(最少6个字符)这对我来说没有意义，因为我没有接触密码字段!我只想更新激活的列。我把我认为相关的代码放在这里，但如果你认为你需要更多，请问:)非常感谢您!型号:attr_accessor:passwordattr_accessible:name,:email,:password,:password_confirmation,:activatedhas_many:sucu_votesemail_regex=/\A[\w+\-.]+@

  9. ruby-on-rails - 如果存在则更新，否则什么也不做？ - 2

    当且仅当模型存在时，我才尝试更新模型的值。如果没有，我什么都不做。搜索似乎只返回更新或创建问题/答案，但我不想创建。我知道我可以用一个简单的方法来做到这一点:found=Model.find_by_id(id)iffoundupdatestuffend但是，我觉得有一种方法可以在一次调用中完成此操作，而无需分配任何临时本地值或执行if。如果记录不存在，我该如何编写一个Rails调用来更新记录而不出现嘈杂错误？最新的Rails3.x 最佳答案 您可以使用try在对find_by_id或where的结果调用update_attribut

  10. ruby-on-rails - 如何在记录更新期间从验证中排除密码字段？ ( rails 3.0.4， ruby 1.9.2) - 2

    我有一个允许更新用户记录的表单。它包含:password和:password_confirmation字段，但我不希望在数据库中已存储加密密码时对它们运行验证。View文件中的字段:'ConfirmPassword'%>在互联网上搜索时，我发现了这段代码，我认为它是针对以前版本的Ruby/Rails的。(我会把它放在我的用户模型中。)validates_presence_of:password,:on=>create由于我的用户模型中密码验证的语法不同(如下)，我对我需要的语法感到困惑。validates:password,:presence=>true,:confirmation=>

随机推荐