Vuex状态在绑定时将[对象对象]插入到输入中
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它可以帮助我们在应用程序中管理和共享状态，使得不同组件之间的数据共享更加简单和可预测。
在使用Vuex时，我们可以通过mutations来修改状态，然后通过getters来获取状态。当我们需要在组件中绑定Vuex状态时，可以使用v-model指令将状态绑定到输入框中。
对于将对象对象插入到输入框中的情况，我们可以通过以下步骤来实现：
- 在Vuex的state中定义一个对象对象的状态，例如：state: { myObject: { key1: value1, key2: value2 } }
- 在mutations中定义一个修改对象对象的方法，例如：mutations: { updateObject(state, payload) { state.myObject = payload; } }
- 在组件中使用v-model指令将对象对象绑定到输入框中，例如：<input v-model="myObject" />
- 在组件中通过计算属性获取对象对象的值，例如：computed: { myObject() { return this.$store.state.myObject; } }
这样，当输入框中的值发生变化时，会自动触发Vuex的mutation方法来修改对象对象的状态。
对于推荐的腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，我无法提供具体的链接。但是，腾讯云提供了丰富的云计算产品和解决方案，可以根据具体需求选择适合的产品和服务。可以通过腾讯云官方网站或者搜索引擎来获取相关信息。
相关·内容
1回答
更改组件时在Vuex存储中更新数组中的项
vue.js、vuex
在我的Vuex store中有一个Notes数组。每个备注都由一个<textarea>表示。我有一个NoteArray组件，它显示每个注意事项：
// NoteArray.vue
export default {
name: "NoteArray",
components: { Note },
computed: {
...mapState({
notes: state => state.notes // get array of Notes from store
})
},
template: `
&l
浏览 8提问于2020-05-30得票数 1
回答已采纳
2回答
Vue md-只向一个方向更新Vuex的输入
javascript、vue.js、vuex
我有一个Vue应用程序，它的输入元素绑定到如下所示：
<template>
<input v-model="this.$store.state.myvalue"/>
</template>
和VueX store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
myvalue: null
},
mutati
浏览 4提问于2019-11-30得票数 3
回答已采纳
2回答
在Vue中保存异步数据的最佳方法是什么？
javascript、vue.js、vuejs2、async-await、vuex
我有一个如下的store模块： const state = {
user: {}
}
const mutations = {
saveData(state, payload) {
state.user = payload
}
}
const actions = {
async loadData({ commit }, payload) {
try {
const res = await axios.get('https://api.example.com/user/1')
浏览 42提问于2019-01-16得票数 3
回答已采纳
2回答
如果使用vuex，如何使用v模型
vue.js、vuex、vuex-modules
如何在vuex上使用v-model，在这种情况下，只有当按钮被点击时才会显示模态框，在这个vuex中也有单独的模块 这是索引模块 import createPersistedState from 'vuex-persistedstate'
import Vue from 'vue'
import Vuex from 'vuex'
import authentication from './authentication'
import products from './products'
import proje
浏览 22提问于2021-07-04得票数 0
2回答
从组件调用时，Vuex映射状态未定义
javascript、vue.js、vuex
因此，每当vuex中的状态不为空时，我都会尝试从组件中更新一些数据。我用laravel设置了一个API routes，它在用户登录后返回用户信息。
API路由：
Route::group(['middleware' => ['auth:api']], function () {
Route::get('profil', 'Api\UserController@profil')->name('profile'); // will returning user info
}
Vuex：
export
浏览 10提问于2020-05-23得票数 0
回答已采纳
1回答
如何使用VUEX编辑VUE上的单击事件后的数据？
vue.js、vuex
我只想编辑和保存json的内容。
在下一个之后，我使用深度克隆来克隆我的数据，并在计算对象中进行编辑，而不是将其发送到Vuex上的中心对象。
代码第一次工作，我可以编辑数据，然后按下编辑它更改数据.但如果我再试着编辑..。我知道错误了
Vue warn:在对观察者的回调中出错“函数() {返回this._data.$$state }"：”错误: vuex不变异vuex存储状态之外的变异处理程序。“
component.js
<template>
<div class="hello">
<form @submit.prev
浏览 1提问于2019-01-30得票数 0
回答已采纳
2回答
将VueX存储状态值绑定到输入(VueJS)
javascript、vue.js、vuejs2、vue-component、vuex
我是VueJS的新手，我正在创建一个VueJS应用程序，您可以在其中获取有关Github用户的一些信息(例如：)
我用VueX创建了一个存储，但我需要更新用户在输入中写入的值，我的"inputValue“始终为"”(其默认值)，当我在输入中键入时，存储值仍为"“
我试过了: Input.vue
<template>
<div class="input">
<input
type="text"
:placeholder="placeholder"
浏览 19提问于2020-05-22得票数 0
回答已采纳
2回答
如何使用Axios发布表单数据？
api、vue.js、axios、vuex
我正在从事一个项目与springboot后端和Vue前端。现在，我可以从我的数据库中获得产品列表。我可以获取列表并将其显示在页面上，但我正在尝试使用表单发布新产品。我能够成功地设置POST方法，但只能发送硬编码的信息。
使用Vuex，我应该更新状态然后发布，还是直接使用操作将表单数据发布到我的后端？什么是最佳实践，我该如何做？
注意，我遇到的区域是组件中的"data: function()“和"submitProduct”操作。
这是我的Vue组件
<template>
<div>
<h1>Products</h1>
浏览 1提问于2018-07-18得票数 0
2回答
为什么我的模板不会被绑定到计算属性来更新呢？
javascript、vue.js、vuetify.js、vuex
我面临的一个问题是，在一个依赖于Vuex方法的computed getter的组件中有一些模板HTML。正如您在模板中所看到的，我只是试图在带有<p>标记的{{ getNumSets }}中显示计算属性的输出。
当我用UPDATE_EXERCISE_SETS突变更新状态时，我可以在Vue devtools中看到状态被正确更新，但是更改没有反映在<p> {{ getNumSets }} </p>部分中。
模板HTML：
<template>
...
<v-text-field
v-model="getNumSets"
浏览 0提问于2021-06-28得票数 2
回答已采纳
2回答
Vue.js -在Vuex状态改变时从API获取数据并重新加载组件。
javascript、vue.js、vuejs2
我来自jQuery背景，最近才开始使用Vue。我正在努力学习尽可能多的知识，我正在尝试开发一个简单的用户搜索和查看详细信息的应用程序，但是我被卡住了，似乎找不到前进的出路。 ? 我有一个由三个组件组成的布局- Nav.vue，Search.vue，UserProfile.vue，如图所示。UserProfile.vue位于路由器视图内部。我将Vuex store与状态userId和username一起使用，并定义了突变来提交状态更改。 当用户通过在搜索组件中提供用户名进行搜索时，我从左侧边栏上的API获取用户列表。当用户单击其中一个搜索结果时，我正在提交userId状态，并希望使用从
浏览 74提问于2021-07-20得票数 1
回答已采纳
1回答
多个自定义复选框组件默认选中状态vuex问题
vue.js、vuejs2、vue-component、vuex
这是我的自定义checkbox组件： <template>
<label class="checkbox">
<input
type="checkbox"
:checked="isChecked"
@change="change"
>
<span />
<slot />
</label>
</template>
<script>
export default
浏览 9提问于2020-07-07得票数 0
1回答
Vuex状态随突变而变化- apollo graphql查询
vue.js、vuex、vue-router、apollo
我有一个表单，用户可以在其中编辑对象-在我的例子中，是关于故事的元数据-在从GraphQL加载之后。但是，当我使用vue-router guard检查故事是否已更改时，故事状态始终是修改后的值。 Vuex story.js ...
getters: {
...formSubmit.getters,
getStory: (state) => {
return state.story},
getEditedStory: (state) => state.editedStory,
getStoryDescription: (state)
浏览 9提问于2021-04-10得票数 0
回答已采纳
1回答
页面上每个Vue实例的分隔Vuex
javascript、vue.js、vuejs2、vuex
我正在页面上实例化多个Vue应用程序：
import Vue from "vue";
import App from "./App.vue";
import useStore from "./store";
const arr = [1, 2];
for (const index of arr) {
const store = useStore();
new Vue({
router,
store,
render: (h) => h(App)
}).$mount(`#app$_{index}`);
}
浏览 0提问于2021-08-30得票数 0
回答已采纳
4回答
编辑数据时，Vuejs 2，VUEX，数据绑定
data-binding、vue.js、vuejs2、vue-router、vuex
我有一个用户配置文件部分，我试图允许用户编辑他们的信息。我使用vuex存储用户配置文件数据并将其拖到表单中。编辑表单位于userProfile组件的子组件中，后者加载数据保存，将其提交给VUEX。
因此，我可以用VUEX的数据填充表单，但一旦更改表单中的任何值，它也会更改父组件中的值。
在保存表单之前，我不会提交对VUEX的更改，因此这意味着数据以两种方式绑定到VUEX。我觉得这是不可能的。在这种情况下，它是不需要的，因为如果用户更改了一些数据，然后在没有实际单击“保存”的情况下导航，数据是VUEX仍然是更改的。
注意，这是一个简化的例子。我实际上使用路由器视图加载子组件，否则我会通过道具传递
浏览 1提问于2017-01-25得票数 10
回答已采纳
1回答
Vuex在子组件中不起作用
vue.js、vue-component、vuex、vue-loader
下面的简单代码让我很头疼，因为某些组件和根实例都会将错误记录到控制台，而不是从vuex对象进行绑定。我还能遗漏什么呢？
var state = {
counter: 0
};
var mutations = {};
var store = new Vuex.Store({state, mutations});
var someComponent = Vue.extend({
template: '<div>{{counter}}</div>',
//data: function(){return {counter: 0}},
vuex
浏览 2提问于2016-09-14得票数 1
回答已采纳
1回答
Vue3/Vuex -我在哪里“变异vuex存储状态之外的突变处理程序”？
javascript、typescript、vue.js、vuejs3、vue-composition-api
当调用Vuex操作时，Firebase成功更新，然后在state.profile上发生Vuex突变，Vue将在watch()中的save上触发以下错误。
[Vue warn]: Unhandled error during execution of watcher callback
Error: [vuex] do not mutate vuex store state outside mutation handlers.
我克隆了store.state.profile，然后通过rfdc将formData合并到formData中。
表单值是在它自己的reactive()数据对象formData
浏览 3提问于2021-07-19得票数 2
回答已采纳
2回答
从相同的公理到不同的组件，VueJS
vue.js、vuejs2、vue-component、vuex
好的，我有两个不同的组件，每个组件都得到Axios响应。但我不希望在每个组件中单独获取数据。这是不对的，它会导致组件分开运行.
更新3
我对代码做了一些修改，但仍然有一些问题。我正在Store.js中使用Vuex进行axios调用，并将其导入到组件中。就像在下面。
这是我的store.js组件；
import Vue from "vue";
import Vuex from "vuex";
var actions = _buildActions();
var modules = {};
var mutations = _buildMutations();
浏览 5提问于2019-03-28得票数 2
回答已采纳
3回答
如何从存储(vuex) vuejs返回值
vue.js、vuex
我正在做一个项目(只是个人的)，并试图对vuex有点熟悉。我做了很多事情(到目前为止)，但有一个问题我无法解决。
我正在尝试访问特定员工的字段->薪资。
这是我的store.js (vuex)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
emps: [
{name: 'John', salary: 110},
浏览 7提问于2020-08-03得票数 0
回答已采纳
1回答
基于动态数据的Vuex表单处理
vue.js、vuex
我试图完成一个过滤机制，具有大量的动态加载过滤-值。意味着我得到了例如data
[
{
key : value
},
{
key : value
}
]
然后在我的模板里
<md-checkbox
@change="change($event)"
v-for="(value, key, index) in values"
id="index"
v-model="some_dynamicly_set_vuex_state"
>{{key}}</md-ch
浏览 5提问于2016-11-24得票数 1
1回答
获取错误"TypeError:这个.$state是未定义的“，在VueJS项目中使用Vuex
javascript、vue.js、vuex
目标是让用户从Firebase访问并使用Vuex存储状态，当应用程序打开时，我使用状态来了解用户是否登录，并将其用于更多的操作。我需要获得一个状态来在data()方法上填充App.vue文件上的变量，但是它显然没有得到正确的引用。加载页面时，会发生以下错误：
[Vue warn]: Error in data(): "TypeError: this.$state is undefined"
found in
---> <App> at src/App.vue
<Root>
和
[Vue warn]: Property or meth
浏览 3提问于2020-01-16得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
