vues3中vuex的简单使用的两种方式

前提： 安装了vuex

第一种：都写在store/index.js文件中
1、store/index.js如下代码：

import { createStore } from 'vuex'
export default createStore({state () {return {count: 0,sum:0}},getters:{total(state){return state.count + state.sum}},mutations: {increment (state,val) {state.count = val}},actions: {changeBtn(state, val){state.sum = val}}
})

2、vue3页面使用

import { useStore } from 'vuex'
let store =  useStore()
let str = computed(()=>{ store.state.count }) // 获取 state中值 响应值
let alS = computed(()=>{store.getters.total}) // 获取 getters中值 响应值
const btn = ()=>{// store.commit('increment', 100) // mutations 更新使用store.dispatch('changeBtn', 200) // actions 更新使用
}

==========================================================================================================================================================

第二种：分模块写法
1、 store/index.js如下代码：

import { createStore } from 'vuex'
import user from './modules/home.js'
export default createStore({modules:{home}
})

2、 store/modules/home.js 代码如下

export default {state: {navList:'list'},
}

3、页面使用

import { useStore } from 'vuex'
let store =  useStore()
let str = computed(()=>{ store.state.home.navList}) // 获取 home中state中值 响应值

备注：vuex的持久化存储可使用sessionStorage或者localStorage或者是插件vue-persistedstate

vues3中vuex的简单使用的两种方式相关推荐

shell 不等于_关于shell编程中的整数值比较的两种方式的简单操作实例
谈一谈关于shell编程中的整数值比较的两种方式 Shell编程有时处理一个对象时,需要我们对对象进行测试. 只有符合要求的才采取下一步操作,这样做的好处可以避免程序出错. 这个测试的对象可以是文件. ...
python循环展示大写字母_python调用大写函数python中字典的循环遍历的两种方式
开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python ...
python中字典的循环遍历的两种方式
开发中经常会用到对于字典.列表等数据的循环遍历,但是python中对于字典的遍历对于很多初学者来讲非常陌生,今天就来讲一下python中字典的循环遍历的两种方式. 注意: python2和python ...
Eclipse设置jsp的编码格式最简单常见的两种方式
Eclipse设置jsp的编码格式最简单常见的两种方式为什么要改变编码方式,原因不外是为了程序运行时的方便,不会出现乱码,最初的jsp的编码并不是utf-8,而是其他iso-8859-1等等,但这样 ...
DLL中导出函数的声明有两种方式
本文引用自:VC编程时DLL中导出函数的声明有两种方式一种方式是:在函数声明中加上__declspec(dllexport): 另外一种方式是:采用模块定义(.def)文件声明,(.def)文件为链 ...
C++类中成员变量的初始化有两种方式
C++类中成员变量的初始化有两种方式: 构造函数初始化列表和构造函数体内赋值.下面看看两种方式有何不同. 成员变量初始化的顺序是按照在那种定义的顺序. 1.内部数据类型(char,int--指针等) ...
c语言返回二叉树的大小,C语言中计算二叉树的宽度的两种方式
C语言中计算二叉树的宽度的两种方式二叉树作为一种很特殊的数据结构,功能上有很大的作用!今天就来看看怎么计算一个二叉树的最大的宽度吧. 采用递归方式下面是代码内容: int GetMaxWidth( ...
C语言中存储多个字符串的两种方式
C语言中存储多个字符串的两种方式方式一二维字符串数组声明: char name[4][10] = { "Justinian", "Momo", " ...
android数据库侵入,Android中实现侵入式状态栏的两种方式
最近对"爸比讲故事"Android版本进行代码重构的时候,对之前版本的大部分界面的头部侵入式效果,作了一个总结和梳理,在期间查阅了thinkcool的博客和结合亲身实践,总结了2种 ...
VISIONPRO中使用工业相机采集图像的两种方式分享
在VisionPro中,使用工业相机采像的方式主要有两种: 通过调用CogAcqFifoTool工具的方式取像通过实现 ICogAcqFifo接口获取图像通过CogAcqFifoTool工具取图: ...

vues3中vuex的简单使用的两种方式

vues3中vuex的简单使用的两种方式相关推荐

最新文章

热门文章