定义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>