0
点赞
收藏
分享

微信扫一扫

Vue学习笔记:Vuex Part03 Action

古月无语 2023-08-17 阅读 60

定义Action

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

示例

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

在这个示例中可以看到包含了state mutations和action。并且在actions内部使用context对象实现对mutation的commit。这个context是与store实例具有相同方法与属性的对象

分发Action

Action通过store.dispatch方法触发

Action与Mutation的最大区别是,Mutation必须同步执行,而Action可以在内部执行一步操作。

示例

在state中创建deptdata,使用mutation提交数据,在action中引入axios读取数据。

store/index.js

// 1页面有多个需要共享的状态,引入vuex,便于维护(非父子通信)
// 2缓存部分异步数据,减少后端服务的访问,增加体验

import { createStore } from 'vuex'
import axios from 'axios'
import { ssrContextKey } from 'vue'

const store = createStore({
    state() {
        return {
            count: 0,
            datadept: []
        }
    },
    mutations: {
        increment(state) {
            state.count++
        },
        setcount(state, payload) {
            state.count = payload
        },
        setdatadept(state, payload) {
            state.datadept = payload
        }
    },
    actions: {
        async getDataDept(context) {
            if (context.state.datadept.length === 0) {
                console.log("length is 000")
                const res = await axios.get('http://127.0.0.1:5000/api/test/jsontest/Depts')
                console.log(res.data.msg)
                context.commit("setdatadept", res.data.msg)
            }

        }
    }
}
)
export default store

在deptlistView中展示数据

<template>
    <ul>
        <!-- <router-link v-for="d in data" :key="d.id" :to="'/user/detail/'+d.id">
            <li>{{ d.name }}</li>
        </router-link> -->
        <li v-for="d in store.state.datadept" :key="d.id" @click="routeClick(d.id)">{{ d.name }}</li>
    </ul>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'

const store = useStore()
const router = useRouter()
const routeClick = (userid) => {
    router.push('detail/' + userid)
}
onMounted(
    () => {
        store.dispatch('getDataDept')
    }
)
</script>

Vue学习笔记:Vuex Part03 Action_action

举报

相关推荐

0 条评论