vue3.2模块化vuex

一、结构

 二、

store/mod-home.js

const modHome = {
    state: () => ({
        "imgList" : [
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dce8b00fb3b4ebecbcf72353bff8a030.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/454c1da2c5b64a3f2c07c5a4c01aa9c4.jpg?thumb=1&w=1226&h=460&f=webp&q=90",
            "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b836faf5402e8c14b626507b5c2e0ed5.jpeg?w=2452&h=920",
        ],
        
    }),
    mutations: {
        // 同步修改状态
    },
    actions: {
        // 异步修改状态
    },
    getters: {
        // 相当与计算属性
    }
}

export default modHome

 store/index.js

// 引入 vuex
import { createStore } from 'vuex'
// 引入模块
import modHome from '@/store/mod-home.js'

export default createStore({
    modules:{
        modHome,
    }
})

html

 

三、效果