美文网首页💚💚VUE 💚💚
vuex4.x+ts的简单用法

vuex4.x+ts的简单用法

作者: Shiyouzhang | 来源:发表于2021-04-20 16:38 被阅读0次

    vuex4.x+ts的简单用法

    vue3已经出来有段时间了,vuex4.x最近也刚刚出来,然后就想着用vue3+ts做一个项目
    这篇文章用来记录vuex4.x 中module的使用

    定义模块

    命名空间

    namespaced: true 命名空间 防止模块命名冲突
    设置后调用mutations和action需要
    '模块名/方法' 例如 app/setMenuList

    
    export const app = {
        namespaced: true, // 防止模块命名冲突 设置后调用mutations和action需要
        //   '模块名/方法' 例如  app/setMenuList
        state: {
            menuList: [],
        },
        getters: {
            menuList: (state: any) => state.menuList,
        },
        mutations: {
            setMenuList(state: { menuList: any }, menu: any) {
                state.menuList = menu
            }
        },
        actions: {
            menuFn(store: any,data:any) {
                    store.commit('setMenuList', data)
    
            },
        }
    }
    
    

    使用模块

    • 在store/index.ts 文件中使用app模块
    import { createStore } from "vuex";
    import {app} from './modules/app'
    export default createStore({
        state: {},
        mutations: {},
        actions: {},
        modules: {
            app
        },
    });
    

    访问(在vue文件中使用)

    一、加命名空间访问方式

    1. 页面中获取state中值
      const menuList = store.state.app.menuList
    1. getter
      const menuList = store.getters['app/menuList']
    1. mutations
      store.commit('app/setMenuList', '要修改的数据')
    1. action
      store.dispatch('app/menuFn', '要修改的数据')

    二、不加命名空间访问方式

    1. 页面中获取state中值
      const menuList = store.state.app.menuList
    1. getter
      const menuList = store.getters.menuList
    1. mutations
      store.commit('setMenuList', '要修改的数据')
    1. action
      store.dispatch('menuFn', '要修改的数据')

    相关文章

      网友评论

        本文标题:vuex4.x+ts的简单用法

        本文链接:https://www.haomeiwen.com/subject/yemnlltx.html