vuex actions异步请求 跟module模块化

actions vuex里面的异步操作，接受参数context ，参数有commt,getters,state
列如：调用 mutations 方法实现修改state 数据 （只能通过mutations 修改 state 数据）

state:()=>{count: 0,
}mutations: {addCount(state) {state.count++},}actions:{getCountAdd(context){context.commit('addCount')},}

在页面调用 （dispatch 调用）

  <div>{{ $store.state.count }}</div><button @click="getCountAdd">+1</button>
<script setup>
import { useStore } from "vuex";
const store = useStore();
function getCountAdd(){store.dispatch('getCountAdd')
}</script>

实现api 请求数据

 state: () => ({banner: []}),mutations: {getBanner(state, banner) {state.banner = banner}},actions: {async getContent(context) {console.log('opopo');// 普通调用// fetch('xxx/xxx/xxx').then(res=>{//      res.json().then(data => {//         console.log(data);//     })//  })// 链式调用// fetch('xxx/xxx/xxx').then(res=>{//    return res.json()// }).then(data => {//     console.log(data);// })// async await 调用const res = await fetch('xxx/xxx/xxx')const data = await res.json()console.log(data);context.commit('getBanner', data.data.banner.list)}}

在页面中直接调用（dispatch 调用）

 <div><div v-for="(item, index) in $store.state.banner" :key="index"><img :src="item.image" /><div>{{ item.title }}</div></div></div>
<script setup>
import { useStore } from "vuex";
const store = useStore();
store.dispatch("getContent");
</script>

module 模块划分(默认)
列如将上面的轮播图抽取出来
新建 module/ home.js
home.js

export default {state: () => ({banner: [],ages:20,names:'徐凤年'}),mutations: {getBanner(state, banner) {state.banner = banner}},getters:{getInfo(state){return  state.names + '今年' + state.ages + '岁'}},actions: {async getContent(context) {const res = await fetch('xxx/xxx/xxx')const data = await res.json()console.log(data);context.commit('getBanner', data.data.banner.list)}}
}

在store/index.js 引入

import { createStore } from 'vuex'
import home from "./module/home"
const store = createStore({modules:{home:home}
})export default store

在页面中使用时 (默认 state要加上模块名称 , getters 不用，获取根模块)

      <!-- 需要加上模块  列如 $store.state.xxx.banner --><div v-for="(item, index) in $store.state.home.banner" :key="index"><img :src="item.image" /><div>{{ item.title }}</div></div></div><!-- 默认不需要加上模块 $store.getter.getInfo  --><div>{{$store.getters.getInfo}}</div>
<script setup>
import { useStore } from "vuex";
const store = useStore();
store.dispatch("getContent");
</script>

module 模块划分(加命名空间 namespaced:true,)
在开发时难免会遇见 模块中存在相同命名的情况，默认情况下会同时获取，所以加命名空间独立出来

export default {namespaced:true,state: () => ({banner: [],ages:20,names:'徐凤年'}),mutations: {getBanner(state, banner) {state.banner = banner}},getters:{getInfo(state){return  state.names + '今年' + state.ages + '岁'}},actions: {async getContent(context) {const res = await fetch('xxx/xxx/xxx')const data = await res.json()console.log(data);context.commit('getBanner', data.data.banner.list)}}
}

在页面使用

      <!-- 需要加上模块  列如 $store.state.xxx.banner --><div v-for="(item, index) in $store.state.home.banner" :key="index"><img :src="item.image" /><div>{{ item.title }}</div></div></div><!-- 加命名空间  --><div>{{$store.getters['home/getInfo']}}</div><script setup>import { useStore } from "vuex";const store = useStore();store.dispatch("home/getContent");
</script>