如何从组件中将函数作为值赋给处于Vuex状态的对象的属性？
在Vue.js中，可以通过使用mapActions辅助函数将函数作为值赋给处于Vuex状态的对象的属性。
首先，在Vue组件中引入mapActions辅助函数：
import { mapActions } from 'vuex';然后，在组件的methods中定义一个函数，并使用mapActions将其映射为Vuex的action：
methods: {
...mapActions(['myAction']),
myFunction() {
// 函数的具体实现逻辑
}
}接下来，在组件的模板中，可以直接调用myAction来触发该函数：
<button @click="myAction">触发函数</button>在Vuex的store中，定义一个action来调用该函数，并将其作为值赋给状态对象的属性：
const actions = {
myAction({ commit }) {
// 调用组件中定义的函数
this.myFunction();
// 其他逻辑处理
}
};最后，在Vuex的state中定义一个对象属性，并将该action赋值给该属性：
const state = {
myObject: {
myProperty: myAction
}
};这样，就可以通过调用myObject.myProperty来触发组件中定义的函数，并在Vuex中管理该函数的状态。
相关·内容
1回答
如何从Vuex存储中删除Fi还原快照侦听器
firebase、vue.js、vuejs2、vuex、vuex4
我正在设法从vue3 3/vuex存储中删除快照监听器。我已经看到了其他类似问题的答案，以及到Firestore文档的许多链接，但我不知道在vuex商店中哪里有取消订阅()的调用。有人能帮助在使用vuex的同时在哪里以及如何调用unsubscribe()函数吗？
我有一个组件，它调用存储中的bindAccts()，然后运行提交/突变并填充我的“帐户状态”。
import { createStore } from 'vuex'
import { db } from '../main'
export default createStore({
state()
浏览 3提问于2021-01-03得票数 1
回答已采纳
2回答
从不同的组件中改变vuex状态？
vue.js、vuejs2、vuex
我有一个组件(模态)，它依赖于商店。该存储具有模态组件的状态--无论它是否活动。
我需要能够调用这个模式打开从其他组件，甚至只是在一个标准的链接。它通过添加一个.active类打开。
如何通过调用存储操作或调用模态组件方法(映射到存储)来更改存储的状态。
模态商店：
class ModalModule {
constructor() {
return {
namespaced: true,
state: {
active: false,
},
浏览 0提问于2017-07-27得票数 3
回答已采纳
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
1回答
vue -如何将回调传递给vuex操作
javascript、html、css、vue.js、vuex
我在想如何将回调传递给vuex动作
我尝试了下面的代码，但不起作用。代码在我启动它之前运行。
src/store/modules/web3.module.js
import Web3 from "web3";
const state = {};
const getters = {};
const mutations = {};
const actions = {
async test(context, confirmCallback, rejectCallback) {
confirmCallback();
rejectCallback();
}
浏览 2提问于2021-11-11得票数 0
回答已采纳
3回答
Vuex动作有效载荷未定义
vue.js、vuex
我有一个如下(简化)的组件：
<script>
import { mapActions } from 'vuex';
import router from '@/router';
import { bindingService } from '@/_services/binding.service';
export default {
props: {
serialNumber: { type: String, default: ' ' }
},
data: () =>
浏览 5提问于2020-04-01得票数 1
回答已采纳
1回答
如何通过vue组件上的vuex存储自动更改数据？
vue.js、vuejs2、vue-component、vuex、vuex-modules
我有两个组件
我的第一个组件是这样的：
<template>
...
<ul class="dropdown-menu">
<li v-for="club in clubs"><a href="javascript:" @click="selectClub(club)">{{club.name}}</a></li>
</ul>
<span class="i
浏览 0提问于2018-03-30得票数 0
回答已采纳
2回答
我刚到NUXT，需要帮助。我试图在一个组件中设置、存储和使用它，但在控制台中获取这些错误。
接收消息
'state' should be a method that returns an object in store/profiles.js.
[vuex] unknown action type: fetchProfiles [vuex] unknown getter: allProfiles
import { mapGetters, mapActions } from "vuex";
export default {
name:
浏览 4提问于2020-07-08得票数 2
回答已采纳
2回答
如何将数据从Vuejs传递到vuex商店？
javascript、vue.js、vuejs2、vuex
我有一个vuejs组件和一个vuex商店。
我希望将数据从vue组件发送到vuejs存储，然后调用vuex中的函数，即将数据推送到db。
我从currentUser (这是可行的)获得数据，但是在vuex存储中，我得到了错误：Cannot read property 'push' of null。
我运行的createPost工作，但数据没有被推送到vuex存储，我认为是因为上面的错误。
#vuejs component
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
浏览 3提问于2019-05-01得票数 1
回答已采纳
1回答
Vuex突变不更新国家
javascript、vue.js、state、vuex
在使用Vuejs应用程序时，我使用Vuex在components.In Vuex存储之间进行状态管理，我有一个操作，该操作从API (工作正常)中获取一些数据，然后将其填充到状态(通过突变)。接下来，我使用getters将更新的状态传递给组件。
问题是，在从操作中将数据填充到状态时存在问题。在DOM中，我尝试通过计算属性获取或使用getter，但获得空字符串。
Vuex商店
const getDefaultState = () => {
return {
clientDeposit: ''
}
}
//state
const state
浏览 4提问于2020-09-03得票数 1
2回答
如何在功能上使用vuex动作
vuejs2、vuex
我是Vue的新手，所以我可能误解了什么。我想在App.vue中的本地函数中调用vuex操作，如下所示：
<template>
<div id="app">
<button @click="runFunction(1)">Test</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default{
data() { return { }
浏览 0提问于2019-08-08得票数 1
回答已采纳
1回答
vue.js :错误未知的操作类型？
javascript、vue.js、nuxt.js
我创建了我的store store/user.js
export const state = () => ({
user: {},
});
export const mutations = {
};
export const actions = {
AUTH ({commit},{email, password}){
console.log('email, password =', email, password)
}
};
export const getters = {};
组件：
<template>
<form @
浏览 2提问于2018-07-20得票数 4
回答已采纳
1回答
无法访问Vuex存储对象的属性
vue.js、vue-component、nuxt.js、vuex、vuex-modules
我用一个名为config.json的JSON文件初始化了我的商店
{
"branding": {
"button": {
"secondary": {
"background_color": "#EC6B24",
...
},
...
}
}
}
..。我在商店里进口的：
import templateConfig from '@/config.json'
export const state = () =
浏览 3提问于2021-03-08得票数 2
回答已采纳
1回答
在vuejs中使用Vuex执行CRUD操作时出错
javascript、vue.js、model-view-controller、vuex
我一直在尝试添加一个新的注释，但是每当我尝试添加它时，控制台就会返回
TypeError：_vm.addNote不是一个函数
和
属性或方法"addNote“不在实例上定义，而是在呈现过程中引用。通过初始化此属性，确保此属性是反应性的，无论是在data选项中，还是对于基于类的组件。
这是我的vuex代码：
<pre>
export default new Vuex.Store({
state: {
newNote:{},
notes: [{
poster: 'static/assets/logo.png',
浏览 2提问于2019-03-22得票数 0
1回答
Vue组件在vuex状态更改后未重新呈现
vue.js、vuex
当vuex的状态改变时，我的vue组件没有改变一个子组件。 我有一个用于项目的插槽列表，并希望根据vuex状态变量呈现项目。 当您单击"item"-component时，它会设置selectedItem状态变量。另一个组件监视此变量，并使用新数据设置equippedItems变量。 但是，当我尝试更改一个项目时，它没有显示出来，即使Vuex中的状态似乎发生了变化。 我已经这样设置了vuex商店： const state = {
equippedItems:
[
{
name: 'Item
浏览 31提问于2019-03-08得票数 0
1回答
VueX:为什么vuex存储数据不更新组件数据属性？
vue.js、vuex
在下面的代码中，组件(app.vue) c2属性在increment更新存储计数器this.$store.state.counter++;时不会更新
我知道我可以使用c2作为computed属性来解决这个问题，但是我想知道为什么Vuex或vue不启动反应性，因为计数器的值是通过增量方法更新的。
Store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
counter:
浏览 2提问于2019-05-17得票数 0
回答已采纳
2回答
更新:突变接收存储，而不是状态。
javascript、vue.js、vuejs2、vuex、quasar
这篇文章有更新，见第一个答案。
因此，首先，我确实搜索了类似的问题(并找到了几个线程)，但没有解决我的问题。我第一次尝试使用类星体框架，可能是在名称空间之类的什么地方迷路了。
所以，首先，一些信息：+我在用ESLint编译时没有任何错误
+我的javascript控制台在运行时没有任何错误
我的问题是:
+我的行为和突变确实在商店里保存了一些东西，但它不应该保存在哪里(见文章末尾的截图)
+我的getter似乎不起作用，在vue dev工具中显示为“未定义”。
我的商店就是这样组织起来的：
+store [folder]
+ index.js
+ app-utils [folder]
浏览 1提问于2018-05-02得票数 2
回答已采纳
1回答
在Vue/Vuex中是否有类似mapStateToProps方式的react/redux
reactjs、vuejs2、vuex
通常在React/Redux中映射状态和操作的方法如下所示，因此映射函数与组件代码分开放置：
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import myAction from 'actions/request';
class MyComponent extends Component {
/* BODY */
}
浏览 9提问于2018-07-31得票数 3
回答已采纳
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、store、vuex-modules
Vue和vuex乞讨者。我正在尝试在vuex中设置具有多个模块的单个存储。
文件夹结构为
store (folder)
index.js
modules (folder)
hoodies.js
shoes.js
我的index.js有
import Vue from 'vue'
import Vuex from 'vuex'
import hoodies from'./modules/hoodies';
import shoes from'./modules/shoes';
Vue.use(Vuex)
浏览 9提问于2019-08-02得票数 1
1回答
Vue测试(JEST)：button.trigger('click')不工作
vue.js、jestjs、vue-test-utils
我读了很多关于stackoverflow和github的讨论，关于vue jest与button.trigger有问题(‘点击’)。今天我在这个问题上挣扎了几个小时，不得不说我非常沮丧，并惊讶于像触发器(‘click’)这样的简单功能怎么会造成这么多问题。 简而言之，我的代码有一个b按钮，它@click从vuex中触发fetchData函数。这在浏览器中工作得很好，但在测试模式下，fetchData不会被执行。 Vue组件代码 <template>
<b-button id="loadButton" variant="outline-primar
浏览 179提问于2020-07-10得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
