在Vuex中使用自定义对象方法,可以通过以下步骤实现:
state: {
user: {
name: 'John',
age: 25
}
}
mutations: {
updateUser(state, newName) {
state.user.name = newName;
}
}
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations(['updateUser']),
changeName(newName) {
this.updateUser(newName);
}
}
}
<template>
<div>
<p>{{ $store.state.user.name }}</p>
<input type="text" v-model="newName">
<button @click="changeName(newName)">Change Name</button>
</div>
</template>
这样,当点击"Change Name"按钮时,会调用changeName方法,该方法会触发updateUser方法,从而修改user对象的name属性。页面上的{{ $store.state.user.name }}会实时更新为新的name值。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
开箱吧腾讯云
开箱吧腾讯云
云+社区技术沙龙[第14期]
T-Day
云原生正发声
企业创新在线学堂
Elastic 实战工作坊
Techo Day
Elastic 中国开发者大会
云+社区技术沙龙第33期
高校公开课
领取专属 10元无门槛券
手把手带您无忧上云