vue3 中 vuex 两种方法使用使用用用用用用用用

今天来写一下这个vue3中vuex的用法

1.安装

npm install vuex -S

2.引入

这个时候就有两种选择了

第一种

直接引入store文件

import $store from './store'

第二种

引入 vuex4.x 的 useStore 方法

import { useStore } from 'vuex'

3.世纪使用

/store/index.js

import { createStore } from 'vuex'export default createStore({state: {data: 123},mutations: {setData: (state, val) => {state.data = val}},actions: {setDataAct: ({ commit }, val) => {commit('setData', val)}},modules: {}
})

第一种

直接引入store文件的使用

import $store from './store'export default {setup() {onMounted(() => {console.log($store.state.data); //123});},
};

也可以对mutations 和 actions 进行操作如：

setup() {onMounted(() => {console.log($store.state.data); //123// dispatch 调用 actions$store.dispatch("setDataAct", 345);console.log($store.state.data); //345// commit 调用 mutations$store.commit("setData", 456);console.log($store.state.data); //456});},

第二种

使用 vuex 的 useStore

import { useStore } from 'vuex'export default {setup() {const $store = useStore()onMounted(() => {console.log($store.state.data); //123});},
};

对mutations 和 actions 进行操作：

setup() {const $store = useStore()onMounted(() => {console.log($store.state.data); //123// dispatch 调用 actions$store.dispatch("setDataAct", 345);console.log($store.state.data); //345// commit 调用 mutations$store.commit("setData", 456);console.log($store.state.data); //456});},

vue3 中 vuex 两种方法使用使用用用用用用用用相关推荐

MATLAB 保存imshow绘制图片到指定文件夹中的两种方法
MATLAB 保存imshow绘制图片到指定文件夹中的两种方法 imwrite函数 imwrite(image,filename) imwrite(image,filename)是将图像数据image ...
水平集方法引入主动轮廓模型算法中的两种方法
水平集方法引入主动轮廓模型算法中的两种方法 1.传统的基于主动轮廓模型和水平集理论的方法 2.变分水平集方法在讲解水平集理论在主动轮廓模型中的应用前,我们先用流程图说明一下常见的处理主动轮廓模型的流 ...
创建一个 Rectangle类，添加width和lenght两个成员变量在 Rectangle类中添加两种方法分别计算矩形的周长和面积编程利用Rectangle输出一个矩形的周长和面积
创建一个 Rectangle类,添加width和lenght两个成员变量在 Rectangle类中添加两种方法分别计算矩形的周长和面积编程利用Rectangle输出一个矩形的周长和面积 publi ...
90页第三题，创建一个 Rectangle类，添加width和lenght两个成员变量在 Rectangle类中添加两种方法分别计算矩形的周长和面积，编程利用Rectangle输出一个矩形的
//90页第三题,创建一个 Rectangle类,添加width和lenght两个成员变量 //在 Rectangle类中添加两种方法分别计算矩形的周长和面积 //编程利用Rectangle输出一个矩 ...
mysql数据库导入到excel表格数据_[转载]将EXCEL表格中的数据导入mysql数据库表中（两种方法）...
今天项目上遇到需要将excel中的数据导入到数据库的classify表中,于是乎拼命上网查阅方法,发现以下两种方法比较可行: 在此之前先说说按照网上的说法我没有试验成功的方法,将excel文件xls保 ...
把EXCEL表格导入到MYSQL中_将EXCEL表格中的数据导入mysql数据库表中（两种方法）...
今天项目上遇到需要将excel中的数据导入到数据库的classify表中,于是乎拼命上网查阅方法,发现以下两种方法比较可行: 在此之前先说说按照网上的说法我没有试验成功的方法,将excel文件xls保 ...
怎么把html数据导入excel,将网页表格数据导入到Excel中的两种方法
将网页表格数据导入到Excel中的第一种方法: 第一步,将包括所需表格的网页打开,并按CTRL+C把网址复制到剪贴板,以备下一步使用. 第二步,打开运行Excel软件,单击菜单栏中的"数据→ ...
ANSA二次开发 - 抽中面的两种方法
文章目录 (一) 使用Skin命令抽中面. (二) 使用Casting抽中面. ANSA是一款非常强大和快捷的前处理软件,用过的人都知道,ANSA在几何清理.模型简化功能方面尤为突出.不仅如此,A ...
微信小程序播放音乐的方法中的两种方法
微信小程序播放音乐的方法有很多种,这里总结一下其中两种的优缺点,主要是最近用到了 audio组件这个是最简单的 <audio src="播放链接" id="mus ...

vue3 中 vuex 两种方法使用使用用用用用用用用

1.安装

2.引入

第一种

第二种

3.世纪使用

第一种

第二种

vue3 中 vuex 两种方法使用使用用用用用用用用相关推荐

最新文章

热门文章

vue3 中 vuex 两种方法使用 使用用用用用用用用

1.安装

2.引入

第一种

第二种

3.世纪使用

第一种

第二种

vue3 中 vuex 两种方法使用 使用用用用用用用用相关推荐

最新文章

热门文章

vue3 中 vuex 两种方法使用使用用用用用用用用

vue3 中 vuex 两种方法使用使用用用用用用用用相关推荐