如何将从接口返回的值 存储到vuex的state的某个属性中

不知道如何开始使用vuex的小伙伴可以看这里vuex官网,文档里面有详细的使用讲解

首先我们创建好一个store和初始的state对象

初始state

======== 注意看这里 =========

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

这里我是将接口返回的数据存储到了state的user_sid属性中,所以我在mutations里写了get_user_sid这个mutation
调用接口获取数据的mutation
接下来就该调用你需要的 mutation handler了。我这里是调用get_user_sid
在这里插入图片描述

像这样就行了
在这里插入图片描述

然后可以看到user_sid已经获取到了接口返回的数据
在这里插入图片描述

进步是无止境的,如发现文中有不足的地方,欢迎大家交流学习。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
将项目接口数据全部存到Vuex,可以按照以下步骤进行: 1. 首先,在Vuex创建一个模块来存储接口数据。可以在store文件夹的index.js引入新建的模块。例如,创建一个名为apiData的模块,可以在index.js写入以下代码: ``` import Vue from 'vue' import Vuex from 'vuex' import apiData from './modules/apiData' Vue.use(Vuex) export default new Vuex.Store({ modules: { apiData } }) ``` 2. 创建apiData模块,并在模块定义state、mutations、actions和getters。可以在store文件夹新建一个名为modules的文件夹,并在其创建一个名为apiData.js的文件。 ``` // apiData.js const state = { data: [] } const mutations = { SET_DATA(state, payload) { state.data = payload } } const actions = { fetchData({ commit }) { // 调用接口获取数据并将数据通过commit方法传给mutations yourApi.fetchData().then(response => { commit('SET_DATA', response.data) }).catch(error => { console.log(error) }) } } const getters = { getData: state => state.data } export default { state, mutations, actions, getters } ``` 3. 在需要使用接口数据的组件,可以通过mapGetters、mapActions等辅助函数从Vuex获取数据和触发actions。例如,在一个名为DataList的组件,可以这样使用: ``` <template> <div> <div v-for="item in apiData" :key="item.id"> {{ item.name }} </div> <button @click="fetchData">获取数据</button> </div> </template> <script> import { mapGetters, mapActions } from 'vuex' export default { computed: { ...mapGetters(['getData']) }, methods: { ...mapActions(['fetchData']) }, created() { this.fetchData() // 在组件创建时调用接口获取数据 } } </script> ``` 通过以上步骤,就可以将项目的接口数据全部存储Vuex,并在需要的组件获取和使用这些数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值