vuex中action中发送数据

简介: vuex中action中发送数据
state: {
    actionData: "",
},
mutations: {
    actioncomAPi: (state, data) => {
      state.actionData = data; //赋值
    },
}
 //异步
actions: {
    actionDataApi(context) {
      axios.get("http://127.0.0.1:667/account").then((res) => {
        context.commit("actioncomAPi", res); //通过commit来设置值
        console.log("在action中设置值", res);
      });
    },
  },


调用页面


created() {
        this.MyCHufa();
    },
methods:{
       MyCHufa() {
            this.$store.dispatch('actionDataApi');//触发action中的方法
            console.log(this.$store.state.actionData)
        }
}


相关文章
|
JSON JavaScript 数据格式
Vue axios 发送 FormData 请求
Vue axios 发送 FormData 请求
362 0
|
5月前
|
JavaScript
成功解决:如何通过this.$router.push(“/Login“)的方式传参,在另外一个页面接收数据的问题
这篇文章介绍了如何在Vue框架中通过路由跳转传递参数,并在另一个页面接收这些参数。具体方法是使用`this.$router.push`方法的`params`属性传递对象,然后在目标页面通过`this.$route.params`接收传递的参数。
成功解决:如何通过this.$router.push(“/Login“)的方式传参,在另外一个页面接收数据的问题
|
3月前
|
JavaScript 数据处理
Vuex 的Mutation 和 Action 有什么区别?
【10月更文挑战第15天】Mutation 和 Action 在 Vuex 中都有着重要的作用,它们相互协作,共同实现了 Vuex 状态管理的功能。理解它们的区别与联系,并在实际应用中正确使用,对于构建高效、可靠的 Vue 应用具有重要意义。
|
3月前
|
存储 监控 JavaScript
Vuex 中 State 的作用
【10月更文挑战第15天】State 是 Vuex 状态管理体系中的核心组成部分,它为应用提供了可靠的数据共享和管理机制,保障了应用的正常运行和良好体验。理解和正确使用 State 是掌握 Vuex 状态管理的关键,对于构建复杂、高效的 Vue 应用具有重要意义。
|
6月前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
2186 1
|
6月前
|
JavaScript
VUEX 使用学习四 : action
VUEX 使用学习四 : action
50 0
|
8月前
|
JavaScript
vue中watch监听路由传来的参数变化问题
vue中watch监听路由传来的参数变化问题
157 0
|
8月前
|
JavaScript
Vue中子组件单个双向绑定发送事件使用input,多个使用 update:变量名;父组件接收时,v-model 接收单个,.sync 接收多个(vue3中使用v-model:name的写法)
Vue中子组件单个双向绑定发送事件使用input,多个使用 update:变量名;父组件接收时,v-model 接收单个,.sync 接收多个(vue3中使用v-model:name的写法)
|
JavaScript Shell
eventBus和$route.push.query同时用解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题
eventBus和$route.push.query同时用解决eventBus持久化问题,和跨组件引起的路由传参监听不到没变化的问题
55 0
基于MobX 封装 Action 接口 Loading #85
基于MobX 封装 Action 接口 Loading #85
89 0