如何设置...mapState (Vuex)之间的值
在Vue.js中，可以通过使用mapState函数来将Vuex store中的状态映射到组件的计算属性中。mapState函数接收一个数组或对象作为参数，用于指定需要映射的状态。
如果使用数组形式，可以直接指定需要映射的状态名称，例如：
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['count']) // 将store中的count状态映射为组件的计算属性count
}
}如果使用对象形式，可以指定需要映射的状态名称以及映射后的计算属性名称，例如：
import { mapState } from 'vuex';
export default {
computed: {
...mapState({
count: 'count' // 将store中的count状态映射为组件的计算属性count
})
}
}通过以上方式，我们可以在组件中直接使用this.count来访问映射后的计算属性。
在使用mapState时，还可以结合对象展开运算符...来将其他计算属性和方法与映射的状态一起使用，例如：
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['count']),
doubleCount() {
return this.count * 2; // 使用映射的计算属性count
}
}
}这样，我们就可以在组件中同时使用映射的状态和其他计算属性。
关于Vuex的更多信息和使用方法，可以参考腾讯云的相关产品文档：Vuex。
相关·内容
1回答
如何正确检测vuex状态和突变？
、、、、
告诉我如何测试突变和正确的状态。我有一个模态窗口组件，如果状态中的showModal属性为true，则呈现它。有一个事件会导致突变，从而改变这个属性。如何检查在调用事件之后，组件是否不再呈现？我需要进口实际的vuex存储吗？
<template>
<div>
<transition name="fade" appear>
<div ref="modal" class="modal-overlay"
v-if="isShow"
@click=&
浏览 3提问于2022-02-10得票数 0
2回答
我使用vuex将chartData映射到一个状态属性。我想要做的是在更新数据集时更新图表。我听说它可以通过混入或观察器来完成，但我不知道如何实现它。我知道mixins创建了一个监视器，但我不知道它在vuex中是如何使用的。
Chartline.vue：
<script>
import { Line } from 'vue-chartjs'
import { mapState } from 'vuex'
export default {
name: 'ChartLine',
extends: Line,
compute
浏览 1提问于2020-06-05得票数 0
我使用vue/vuex已经有几个月了，我看到了mapState、mapGetters、mapActions、mapMutations，但是除了mapState之外，我不知道它们做什么。
我就是这样使用mapState的
// mutations.js
user: {
address: {},
name: '',
age: ''
}
在我的代码中有这样的东西：
import { mapState } from 'vuex'
export default {
data: {},
computed: {
...map
浏览 0提问于2018-04-06得票数 19
3回答
我寻找一种干净的方式使用v型和vuex商店。
Vuex提供了几种帮助方法，它们非常有用，但在使用v模型时有些烦人。
我今天使用v模型和模块化存储的方式如下
computed: {
type: {
get() {
return this.$store.state.mymodule.type;
},
set(newValue) {
this.$store.dispatch('mymodule/setType', newValue)
}
}
这是可行的，但我发现最好是利用vuex助手的利润来避免样板代码(这个.$store，
浏览 1提问于2019-01-30得票数 4
回答已采纳
因此，我正在试验一个使用vue cli创建的新项目，其中我使用了路由器和VueX
因此，在我的HelloWorld.vue文件中，脚本部分包含以下代码：
import { mapState } from 'vuex'
export default {
name: 'hello',
computed: mapState({
msg: 'nombre'
}),
有没有一种更直接的方式调用状态中的值？
msg: store.nombre
我的vuex存储在根main.js中定义如下：
//vuex
import Vuex fro
浏览 0提问于2018-08-01得票数 2
我是vue.js和vuex的新手，我对mapstate对象有一个问题，首先我在我的商店中只有一个模块：
-Store
-index.js
-mutations.js
-actions.js
-state.js
state.js :
export default {
userInfo: {
messages: [{ 1: 'test', 2: 'test' }],
notifications: [],
tasks: []
}
}
因此，当我试图访问userInfo对象时，所有操作都是正确的：
浏览 0提问于2018-03-09得票数 5
回答已采纳
1回答
我正在使用Nuxt + Vuetify作为eCommerce应用程序。 有两个独立的组件- Header和Cart。 Header组件包含一个按钮，单击该按钮将切换购物车的可见性。 <template>
<v-app-bar>
<v-btn @click="$store.commit('toggleCart')" icon>
<v-icon>mdi-cart</v-icon>
</v-btn>
</v-app-bar>
</templa
浏览 10提问于2020-01-23得票数 0
回答已采纳
1回答
Vue.js vuex道具不改版
、、、、
我使用Vuex并显示如下数据：
<template>
<div>
<div>
<div v-for="port in ports">
<port :port="port"></port>
</div>
</div>
</div>
</template>
<script>
import { mapS
浏览 2提问于2018-10-06得票数 0
回答已采纳
我正在创建一个基本的SPA，但碰巧我用Vuex管理的状态和上面的突变都很好，但是在我想要使用mapState和mapMutations的每个组件中，我必须在本地导入它们。
<script>
import {mapState,mapMutations } from 'vuex';
export default{
computed : mapState(['isLoggedIn']),
methods: {
...mapMutations(['logout'])
浏览 3提问于2018-04-09得票数 10
回答已采纳
2回答
我的目标是创建一个“编辑帐户”表单，以便用户可以修改他们的帐户数据。我想在一个已经填写了用户数据的表单中显示帐户数据，即用户名、电子邮件、地址.
然后，用户可以修改表单中的数据并提交此表单，以更新其用户信息。
我使用v-model将表单输入绑定到数据中名为accountInfo的对象，如下所示：
data() {
return {
accountInfo: {
firstName: ''
}
}
}
下面是模板中表单输入的一个例子：
<input v-model.trim="accou
浏览 0提问于2018-06-27得票数 18
回答已采纳
我有一个页面，用户可以编辑他们的设置。如果用户没有对表单进行任何更改，但由于某种原因，该按钮始终处于启用状态，我希望禁用submit按钮。有什么想法吗？
pages/settings/_id.vue
</template>
<b-button :disabled="userCopy == user">
Continue
</b-button>
</template>
<script>
import { mapState } from 'vuex'
import _ fr
浏览 2提问于2020-07-14得票数 0
回答已采纳
1回答
我正在将vuex升级到2.0，我想知道在初始化数据之前是否可以使用mapstate/getters？
在Vuex1.0中，Vuex状态会在data()之前映射，这样我就可以先调用this，然后再调用我想要访问的状态
import { mapGetters } from 'vuex'
export default {
vuex: {
getters: {
userSettings: ({ settings }) => settings.userSettings,
}
},
data: function () {
return
浏览 2提问于2017-04-13得票数 5
在我的MVC项目中，我将Vue3与Vuex4结合使用，它们正在工作，但我对mapState有一个问题。
如果我使用这些导入语句，我将得到以下错误：
import Vue from 'vue';
import Vuex from 'vuex';
1未登录SyntaxError:无法在模块之外使用导入语句
因此，我将这些文件添加到我的_Layout页面以修复它。
<script src="~/lib/vue/vue.global.js"></script>
<script src="~/lib/vuex/vuex
浏览 1提问于2020-11-24得票数 1
回答已采纳
4回答
我一定是漏掉了什么。如何使用带有多个模块的vuex mapState？
据了解，除了传递一个对象作为参数外，命名空间mapState还可以使用两个参数:名称空间和表示模块成员的对象名称数组。像这样
// an imcomplete vue
export default {
computed: mapState('user', ['addresses', 'creditCards'])
};
但是，如果我想从第二个命名空间中添加对象来计算呢？例如，像这样的供应商：
mapState('vendor', ['produ
浏览 5提问于2017-08-09得票数 28
回答已采纳
1回答
我会尽量把这句话说清楚：
我有一个Vue组件，我正在渲染它，名为World.vue：
<template>
<v-container>
This is the whole world
<v-btn @click="test()" />
</v-container>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
浏览 1提问于2021-11-26得票数 0
回答已采纳
3回答
我试图使用mapState函数从存储中获取状态，但不能使用生成的代码将值返回到我的模板代码中.
<template>
// Some code
<template v-if="!isLoggedIn">
// Some code
</template>
<template v-else>
// Some code
浏览 0提问于2018-07-17得票数 2
我在一个Vue组件上使用Vuex mapState (使用Vue.extend，而不是类样式)：
computed: {
...mapState('geoframes/create', [
'apiRequestId',
'countPending',
'deviceCount',
'requestId',
]),
例如，引用this.deviceCount的Vue组件中的方法抛出TS错误，因为它没有意识到这些错误是通过Vuex绑定到组件的。
我该
浏览 9提问于2018-07-25得票数 2
回答已采纳
我在我的vuejs项目中使用了与vuex集成的typescript语法。我想使用.ts文件中计算出来的mapState方法，但是我得到了一个语法错误。目前，我正在使用文档建议的计算函数语法，我的意思是：
get counter() {
return this.$store.state.count;
}
如果你阅读了Vuex的文档，你会发现以这种方式使用Vuex而不是使用mapState是非常重复的。在大型应用程序中，使用mapState非常简单和有用。我想在我的Typescript组件中使用mapState，但我不知道正确的方法。我尝试了下面的方法来使用mapState函数，但它不
浏览 76提问于2018-07-26得票数 17
我的项目是用Vue js开发的，它有用javascript开发的存储，我集成了用vue-typescript开发的新组件，这个组件中的所有脚本都是用typescript开发的。
为了导入状态变量，我尝试了两种方法
使用Vuex
import { mapGetters, mapState, mapActions, mapMutations, createNamespacedHelpers } from 'vuex'
@Component({
computed: {
...mapState([
'allowedUrls'
])
浏览 5提问于2018-11-16得票数 0
我和Vuex mapState的范围有点问题。我需要在页面上本地输出用户名，而不会被输入字段中的v-model反应性更新(对于相同的用户名数据)。 以下代码运行良好，但是，如果用户刷新页面，则状态将丢失，并返回为未定义状态。 computed: {
...mapState(["userProfile"]),
},
beforeMount() {
this.localUserProfile.name = this.userProfile.name;
console.log("localUserProfile: " + this.localUserP
浏览 14提问于2019-08-22得票数 0
我将正则JavaScript函数(split和join)应用于计算属性，该属性本身接收状态变量。
但是，当组件挂载时，我会得到一个Cannot read property 'split' of undefined"错误，因为当时我的计算属性user暂时仍然是空的。
有办法绕开吗？
<template>
<div>
{{ userDob }}
</div>
</template>
<script>
import { mapState } from "vuex"
export d
浏览 1提问于2019-12-06得票数 1
回答已采纳
根据Vuex模块化组织商店的文档()，我有以下内容：
store/index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// Default Store State for the Hug Employee Dashboard:
// import defaultState from "@/store/defaultStore";
/*eslint no-param-reassign: ["error", { "props
浏览 2提问于2019-12-04得票数 5
回答已采纳
我正在尝试在一个 (以及用于状态管理的vuex )项目中使用Vue.js。基本上，后端为Vega对象服务，该对象由前端通过HTTP请求通过单击事件获取。但是，我必须点击两次才能显示这个情节，第一个单击事件总是触发一个错误"Uncaught (in promise) TypeError: Cannot read property '$schema' of null“。有人能帮我调试一下吗？非常感谢。详情如下：
vue组件文件：
<template>
<button @click.native="fetchCars(); displayVega
浏览 0提问于2018-11-15得票数 2
回答已采纳
1回答
我正在使用Vuex/Axios向API发出GET请求。当组件挂载时，我向Vuex存储分派一个操作，并发出Axios GET请求。在Vuex操作中，Axios GET请求按预期返回响应，但组件内部的响应返回未定义。我做错了什么？
axios/index.js
import axios from 'axios';
const API_URL = 'http://localhost:3000/api/v1/';
const plainAxiosInstance = axios.create({
baseURL: API_URL,
withCredent
浏览 26提问于2019-11-07得票数 1
回答已采纳
1回答
我试图通过从Vuex导入mapState来使用Vue视图中的mapState助手。请参阅下面的代码
<template>
<div>TODO Athlete Profile {{ userProfile }}
<b-button class="btn btn-danger" v-on:click="logout()">Logout</b-button>
</div>
</template>
<script>
import { mapstate } from &#
浏览 1提问于2020-11-23得票数 0
回答已采纳
在下面的代码中，我对输入使用两种方法来更新状态和应用vuelidate验证规则，现在验证规则没有正确应用，$v.newEmloyeeName.$dirty get总是正确的。如何解决这一问题，以便两种状态都得到更新，并对输入应用验证规则？我用的是vue 2
<input
type="text"
placeholder="Employee Name *"
@input="setNewEmployeeName; setName()"
:value="newEmployeeName">
<div v
浏览 6提问于2022-02-27得票数 0
1回答
在我的组件中，我试图从Vuex状态检索对象，并将其属性的所有直接绑定到组件的作用域(作为Vuex绑定)。
new Vuex.Store({
state: {
data: {
a: '123',
b: '456',
c: '789',
使用mapState/Getters选项Vuex提供的是否有更少的方法来实现这一点？
例如：
computed:{
...mapState{
'a': state => st
浏览 2提问于2020-03-08得票数 1
回答已采纳
2回答
我试图在Vuex中使用mapState，如下所示：
mapState({
locations: state => state.locations,
types: state => state.models.types,
models: state => state.models.models,
vendors: state => state.models.vendors,
statuses: state => state.statuses,
})
我得到一个“意外标记”
浏览 0提问于2016-12-16得票数 1
回答已采纳
假设我有以下组件：
import { mapState } from 'vuex';
import externalDependency from '...';
export default {
name: 'Foo',
computed: {
...mapState(['bar'])
},
watch: {
bar () {
externalDependency.doThing(this.bar);
}
}
}
在测试时，我希望确保使用bar (来自vuex状态)调用ext
浏览 0提问于2018-03-22得票数 23
1回答
我正在学习Vuex，但是运行mapState面临挑战，我认为mapGetters和mapMutations也会带来同样的挑战。
我正在非节点环境中运行xampp localhost中的代码，并且一直收到以下错误：
Uncaught SyntaxError: Unexpected token {
以下是我的代码：
index.html
<script src="./vue.js"></script>
<!--<script src="./vuex.min.js"></script>-->
<di
浏览 2提问于2018-01-09得票数 2
回答已采纳
2回答
Vue 3和Vuex 4
、、、
我正在使用Vue 3和组合API，并试图了解如何直接从Vuex映射我的状态，以便模板可以使用它，并使用v-model动态更新它。 mapState能解决这个问题吗？对，不，我需要通过getter获取状态，在模板中打印出来，然后对状态中的每个字段进行手动提交……在Vue 2和Vuex中，我有100%的动态
浏览 37提问于2021-06-30得票数 0
1回答
我有这样的代码：
computed: {
mapState(["appErrors", "user", "profilesFor"]),
compiledData () {
return {
template: `<p>${this.data}</p>`
}
}
}
基本上，我使用的是Vuex，它有mapState，但是我也想定义自己的计算函数，所以我改变了
computed: mapState(["appErrors",
浏览 3提问于2017-11-09得票数 4
回答已采纳
在我的子组件中，我试图访问存储状态对象(称为background_color)的嵌套属性(称为template)：
<template>
<div
class="btn"
:style="{ 'background-color': backgroundColor }"
>
content
</div>
</template>
<script>
import { mapState } from 'vuex'
export defaul
浏览 1提问于2021-03-10得票数 1
回答已采纳
1回答
我正在设法从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
回答已采纳
1回答
我想通过在div中循环调用vuex中的图像源。
我是说像这样。
<div v-for="({image}, index) in allData" :key="index">
<img src="this.image" alt="this.index"/>
</div>
<script>
import {mapState} from 'vuex';
export default{
computed: {
...mapState([
浏览 0提问于2020-04-18得票数 0
回答已采纳
我正在尝试拥有一个由命名空间模块和全局状态组成的状态。不幸的是，我可以访问全局操作，但无法获取全局状态属性。 如果我尝试在这样组件中使用mapState， computed: {
...mapState(['editMode']),
...mapState('address', ['addresses']),
} 我可以访问地址，但editMode始终未定义。映射动作可以完美地工作，并根据Vuex Chrome工具更新状态。 但我注意到，全局状态显示在它自己的“名称空间”“全局”下。因此，我尝试使用全局(‘...mapState’，&#
浏览 15提问于2020-04-02得票数 0
回答已采纳
我经历了类似的问题，但我找不到答案，也没有一个对我有效。
Parent.vue
<div class="col-sm-2" v-for="(item,index) in itemsData" :key="index">
<ItemWidget :item="item" />
</div>
<script>
import { mapState, mapActions } from "vue
浏览 0提问于2019-08-09得票数 0
在vuejs组件中，我现在面临一个绕过vuex状态到mapOptions的问题。
这是我的代码：
<template>
<div>
<highcharts :constructor-type="'mapChart'" :options="mapOptions" class="map"></highcharts>
</div>
</template>
<script>
import { mapState } from
浏览 2提问于2020-04-03得票数 0
回答已采纳
我在运行vuex mapState函数时遇到了问题。在我的文件TheHeaderComponent.vue中，我试图同时打印{{ $store.state.coins }}和{{ coins }}，但是尽管我在组件中传入了...mapState['coins']，但是只打印了前者。 显示的相关错误为vue.esm.js?a026:628 [Vue warn]: Property or method "coins" is not defined on the instance but referenced during render. Make sure tha
浏览 45提问于2019-03-04得票数 1
回答已采纳
我们希望在不同的页面之间共享值。我们尝试了以下几种方法。
在同一页上，State返回了正确的值，但在不同的页面上没有设置State。我们做错什么了吗？还是Vuex无法在页面之间共享值？
对于这个问题，我们已经用简化的代码取代了它们。造成这一问题的代码更加复杂。
/store/index.js
const NOT_SET = null
export const state = () => ({
value: NOT_SET,
})
export const mutations = {
setValue(state, value) {
state.value = valu
浏览 1提问于2022-05-12得票数 1
回答已采纳
我有一家vue商店，有以下几个
store.js
import Vue from 'vue'
import Vuex from 'vuex'
const state = {
supplementStore: {}
}
const actions = {
getDataFromApi ({dispatch, commit}) {
APIrunning.then(response => {
commit('SET_SUPPLEMENT', response)
})
}
}
c
浏览 1提问于2019-05-11得票数 1
回答已采纳
我需要检查来自vuex的对象在我的Vue组件中是否为空 我的组件脚本： <script>
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('payments')
export default {
methods: {
...mapState(['bankData']),
request () {
if (this.bankDat
浏览 39提问于2020-10-29得票数 0
回答已采纳
我与Vuex合作，我有两个州：
state: {
token: 'xyz',
user: {
id: 1,
user: 'cody',
username: 'cody'
}
}
在组件中，我使用了以下内容：
<template>
<div>
<button @click="getProfile">
click to get profile
</button>
<p>{{ user.name }}<
浏览 3提问于2021-07-15得票数 0
回答已采纳
4回答
我正在尝试添加或更新一个对象，以便与Vuex一起存储。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userData: {}
},
mutations: {
ADD_USER_DATA: (state, data) => {
state.userData.push(data)
}
}
})
这将返回state.userData.push不是一个函
浏览 1提问于2018-12-15得票数 7
在我见过的几乎所有关于vuex模块注册的指南、教程、帖子等中，如果模块是由组件注册的，则在export default组件声明之前导入并定义createNamespacedHelpers，例如： import {createNamespacedHelpers} from 'vuex'
const {mapState} = createNamespacedHelpers('mymod')
import module from '@/store/modules/mymod'
export default {
beforeCreated()
浏览 137提问于2019-02-08得票数 6
2回答
我是Vue和Vuex的新手，我正在尝试弄清楚如何在商店中改变数据。
目前在我的状态下，默认用户名是' default‘，我想将其更改为'otto'，稍后我将从数据库中获取此信息。但出于理解的目的，我只是想让它起作用。
此时，组件已正确加载，并显示为“default”。未出现错误。
store.js：
// store.js
export default {
state: {
username: 'default'
},
getters: {
},
mutations: {
chan
浏览 0提问于2018-06-21得票数 7
2回答
我正在从事一个项目与springboot后端和Vue前端。现在，我可以从我的数据库中获得产品列表。我可以获取列表并将其显示在页面上，但我正在尝试使用表单发布新产品。我能够成功地设置POST方法，但只能发送硬编码的信息。
使用Vuex，我应该更新状态然后发布，还是直接使用操作将表单数据发布到我的后端？什么是最佳实践，我该如何做？
注意，我遇到的区域是组件中的"data: function()“和"submitProduct”操作。
这是我的Vue组件
<template>
<div>
<h1>Products</h1>
浏览 1提问于2018-07-18得票数 0
2回答
回顾20:20编辑--这个 解决了真正的底层问题，当遇到下面的问题时，这个问题并不明显。把这个问题/答案留给后人.
我有一个带有Django REST后端的VueJS前端，它有几个端点。
无法工作的用户流：
用户通过表单输入数字数据，然后按下按钮。数据在BasePage.vueData服务中的局部变量(AddNormal)中被调用，它接受局部变量并发布以纠正API的响应数据(包括pass/ fail )通过存储变量页上的setter.Based设置为Vuex需要重定向以传递或失败页。
如何根据Vuex变量有条件地重定向到Pass页(有进一步的操作)或失败页？
BasePage.vue
<
浏览 4提问于2019-09-23得票数 0
我想使用v-for循环遍历一个对象数组。但是，我的状态返回一个包含对象数组的对象：
{ "todos": [ { "id": "x", "description": "y" }, { "id": "a", "description": "b" } ] }
这会导致v-for不起作用。如果我使用getter，它会返回对象数组，就像它应该返回的那样：
[ { "id": "x", "description":
浏览 1提问于2020-05-11得票数 2
1回答
我已经模块化了我的Vuex存储，并且需要子组件能够访问数据/使用与它们的父组件相同的存储。
以下是我尝试过的：
<!-- ParentOne.vue -->
<template>
<div>
<child-component
vuex-store="services/opportunities"
/>
</div>
</template>
<script>
import ChildComponent from '@/components/services/child-c
浏览 3提问于2020-10-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
