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>