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/setMenuListstate: {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文件中使用)

一、加命名空间访问方式

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

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

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

vuex4.x+ts的简单用法相关推荐

反编译工具jad简单用法
反编译工具jad简单用法下载地址: [url]http://58.251.57.206/down1?cid=B99584EFA6154A13E5C0B273C3876BD4CC8CE672& ...
QCustomPlot的简单用法总结
QCustomPlot的简单用法总结第一部分:QCustomPlot的下载与安装第二部分:QCustomPlot在VS2013+QT下的使用 QCustomPlot的简单用法总结写在前面, ...
python matplotlib 简单用法
python matplotlib 简单用法具体内容请参考官网代码 import matplotlib.pyplot as plt import numpy as np # 支持中文 plt.rc ...
Windump网络命令的简单用法
Windump网络命令的简单用法大家都知道,unix系统下有个tcpdump的抓包工具,非常好用,是做troubleshooting的好帮手.其实在windows下也有一个类似的工作,叫windum ...
Android TabLayout(选项卡布局)简单用法实例分析
本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到 ...
shell expect的简单用法
为什么需要expect? 我们通过Shell可以实现简单的控制流功能,如:循环.判断等.但是对于需要交互的场合则必须通过人工来干预,有时候我们可能会需要实现和交互程序如 telnet服务器等进 ...
Shellz中awk的简单用法
其实shell脚本的功能常常被低估.在实际应用中awk sed 等用法可以为shell提供更为强大的功能.下面我们将一下awk调用的简单方法进行了总结.方便同学们学习: awk的简单用法: 第一种调用 ...
python装饰器实例-Python装饰器原理与简单用法实例分析
本文实例讲述了Python装饰器原理与简单用法.分享给大家供大家参考,具体如下: 今天整理装饰器,内嵌的装饰器.让装饰器带参数等多种形式,非常复杂,让人头疼不已.但是突然间发现了装饰器的奥秘,原来如此 ...
python装饰器实例-Python装饰器简单用法实例小结
本文总结分析了Python装饰器简单用法.分享给大家供大家参考,具体如下: 装饰器在python中扮演着很重要的作用,例如插入日志等,装饰器可以为添加额外的功能同时又不影响业务函数的功能. 比如,运行 ...

vuex4.x+ts的简单用法

vuex4.x+ts的简单用法

定义模块

命名空间

使用模块

访问(在vue文件中使用)

一、加命名空间访问方式

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

vuex4.x+ts的简单用法相关推荐

最新文章

热门文章