如何保持vue计算属性与vuex状态相同，反之亦然？
为了保持Vue计算属性与Vuex状态相同，可以采取以下步骤：
- 首先，在Vue组件中引入Vuex，并在计算属性中使用Vuex状态。这可以通过使用
mapState辅助函数来实现。mapState函数将Vuex状态映射到组件的计算属性中。
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['myState'])
}
}- 然后，确保Vuex状态的变化能够触发计算属性的更新。这可以通过在计算属性中使用Vuex状态的getter方法来实现。getter方法会在Vuex状态发生变化时自动调用。
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['myState']),
myComputedProperty() {
return this.myState; // 使用Vuex状态的getter方法
}
}
}- 反过来，如果要保持Vuex状态与计算属性相同，可以使用Vuex的
mutations来更新状态。在Vue组件中，通过调用commit方法来触发相应的mutation。
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations(['updateMyState']),
updateComputedProperty() {
this.updateMyState(this.myComputedProperty); // 调用mutation更新Vuex状态
}
}
}这样，无论是Vuex状态还是计算属性发生变化，都能保持同步。
对于以上问题，腾讯云没有直接相关的产品或链接地址。但腾讯云提供了云服务器、云数据库、云存储等基础云计算服务，可以作为支持Vue和Vuex开发的基础设施。
相关·内容
我想要保持vue计算属性与vuex状态相同，并且它没有达到我预期的result.This是一个简单的操作来显示我的问题。https://jsfiddle.net/qtttttttttting/Lteoxz9f/22/ const store = new Vuex.Store({ fullNamehhh hhh" mutat
浏览 19提问于2019-01-29得票数 0
1回答
我正在尝试在一个Vue项目中使用Typescript，在这个项目中，我使用vuex进行数据状态管理。在中，它说：
但是，该站点周围没有使用提示或规范。那么，假设我们已经有了Vuex@3.0+和Vue@2.5+，那么在存储成员中实现Typescript要做什么呢？附言: Typescript与Vuex的属性的无缝
浏览 17提问于2017-11-30得票数 0
回答已采纳
2回答
我遵循Vuex指南中的示例代码，得到了一个奇怪的结果(至少对我来说是这样)。Vuex商店import Vuex from "vuex";
}
export default stor
浏览 0提问于2018-09-27得票数 1
3回答
我将登录状态保存为vuex状态下的布尔值。因此，我使用保存状态以进行页面刷新。vuex持久化状态中的dafault存储是本地存储。与其将存储状态保存在本地存储上，我希望将其保存在cookies...so中，而是遵循与文档中描述的相同的操作
当我使用默认存储(即本地
浏览 6提问于2017-03-29得票数 7
我看到的每一个示例和文章都处理这样的对象：
下面的例子突出了我的许多困惑。let person = new Person(
浏览 1提问于2019-02-22得票数 0
回答已采纳
1回答
我正在与vuex合作一个Laravel vue.js项目，但在提交对商店的响应时遇到了问题。但是，当我在本地管理组件中的状态时，它可以正常工作。, user_id: 3, power_id: 2, created_at: "2019-01-19 length: 2 })
.catch(error =>
浏览 16提问于2019-01-19得票数 0
我有一个Vue应用程序，它的输入元素绑定到如下所示： <input v-model="this.$store.state.myvalue"/>和VueX store/index.jsimport Vuex from "vuex";
Vue.us
浏览 4提问于2019-11-30得票数 3
回答已采纳
我在父组件(比如App.vue )中获取新页面。滚动条在PropertyBox.vue中。每当我获取新页面时，我都会更新App.vue中的数据，并将其作为属性发送给PropertyBox。为了能够看到PropertyBox中的更改，我更新了它在App.vue中的关键(如果没有这些更改，即使使用了新的数据，也不会出现更改)。
浏览 3提问于2022-12-03得票数 0
1回答
我不知道让vuex操作返回如下示例中的axios承诺是否是一种糟糕的方法。我这样做的原因，是因为我需要来自请求中的vuex状态的一些值。谁能告诉我，这是不好的还是完全没问题的？:) /* Vuex action */ return getSomething( state.basket.shipping,},
/* Method in vu
浏览 20提问于2019-03-08得票数 1
1回答
我需要帮助，有人解释我如何安装Vuex在一个Nuxt 3应用程序。当我使用这个命令npx nuxi init安装Nuxt 3时，我有一个新的Nuxt 3应用程序，但是当我想在Nuxt中使用Vuex时，我不能这样做，因为它不是默认安装在一个新的Nuxt 3应用程序中。所以我想我需要用"npm vuex“来安装它，好吧，我明白这很容易，但对我来说并非如此。
我需要有人一步一步地向我解释如何让它发挥作用。互联网上没有关于如何在一个新的Nuxt 3应用程序中安装Vuex</em
浏览 12提问于2022-11-24得票数 2
2回答
我正在通过一个计算函数在我的数据属性中设置一个数组，它正在工作。但我想知道如果我不在任何地方叫它怎么可能？我的数据： return { };我的计算： loadedProjects() {
浏览 0提问于2019-08-23得票数 1
回答已采纳
2回答
span> </div> </draggable>}state: {
document: { "id": "0"
浏览 0提问于2017-08-11得票数 1
并将已加载的产品放置到vuex状态的products。所以，有Vue计算属性，看起来像state: IProductState;
更新：{{ currentProduct.name }}中有itemId属性。并计算出依赖于它的<e
浏览 2提问于2019-08-16得票数 2
回答已采纳
我在vue有fromSelected道具。我想通过道具值获得状态选择的项目。<template></template> export default { }像这样的情色状态
浏览 1提问于2018-05-25得票数 3
回答已采纳
2回答
我在一个组件中得到了一个数据数组，我想在另一个组件中访问这些数据，但是不能正确地访问它。这是我到目前为止..。export default { return { { title: "Title One" { title: "Title Two"
浏览 0提问于2019-03-23得票数 1
1回答
我计算了两个来显示Vuex的状态数据： dataTab:function(){ }, mapA: state=>state.form.a我读了一些关于计算的文档。计算器将运行Object.defineProperty()为vue实例创建新属性</e
浏览 2提问于2018-09-26得票数 0
我正在构建一个Vue 2 Webpack应用程序，它使用Vuex。我试图通过监视从Vuex存储中获取数据的计算属性来更新组件的本地状态。updatedList) => { },};
如您所见，我有一个名为tagList的计算属性根据，我可以调用this.propertyName并更新我的本地组件状态，但是当我调用
浏览 0提问于2018-03-30得票数 5
回答已采纳
如果用户id和密码是有效的，我将在VUEX存储状态下设置用户真实性。但是我如何在我的signIn.vue中访问它来重定向呢？如果用户是有效的，那么将VUEX存储状态(即isUserAuthentic )设置为true，为此，我使用了计算属性。获取用户状态，即isUserAuthentic，并在计算属性中在hasUserSignedIn中工作。我正在检查用户是否是真实的，然后从这个计算</em
浏览 1提问于2020-08-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
