Vue3中使用Pinia修改State的五种方式
更新时间：2023年11月15日 15:03:51 作者：xyphf_和派孔明
这篇文章主要介绍了Vue3中使用Pinia修改State的五种方式,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
修改Pinia仓库的值有5种方式
src/store/index.ts
import { defineStore } from 'pinia';
import { Names } from './store-name';
export const useTestStore = defineStore(Names.Test, {
state:()=>{
return {
current:1111,
name: '小满111'
}
},
getters:{ // 类似computed计算属性 同样有缓存的
},
actions:{ // 类似 methods方法 可以做同步、异步操作 提交state
}
});第一种修改State的方式
<template>
<div>
pinia: {{ Test.current }} --- {{ Test.name }}
<button @click="change">change</button>
</div>
</template>
<script setup lang="ts">
import {useTestStore} from './store';
const Test = useTestStore();
// 第一种修改State的方式
const change = () => {
Test.current++
}
</script>
<style scoped>
</style>第二种修改State的方式
<template>
<div>
pinia: {{ Test.current }} --- {{ Test.name }}
<button @click="change">change</button>
</div>
</template>
<script setup lang="ts">
import {useTestStore} from './store';
const Test = useTestStore();
// 第二种修改State的方式 批量修改对象属性
const change = () => {
Test.$patch({
current: 999,
name: '李四'
})
}
</script>
<style scoped>
</style>第三种修改State的方式
<template>
<div>
pinia: {{ Test.current }} --- {{ Test.name }}
<button @click="change">change</button>
</div>
</template>
<script setup lang="ts">
import {useTestStore} from './store';
const Test = useTestStore();
// 第三种修改State的方式 向$patch中传入工厂函数 可以写逻辑
const change = () => {
Test.$patch((state) => {
if(state.current>1113){
state.current--;
state.name = '罗翔老师';
} else {
state.current++;
state.name = '罗永浩老师';
}
})
}
</script>
<style scoped>
</style>第四种修改State的方式
<template>
<div>
pinia: {{ Test.current }} --- {{ Test.name }}
<button @click="change">change</button>
</div>
</template>
<script setup lang="ts">
import {useTestStore} from './store';
const Test = useTestStore();
// 第四种修改State的方式 覆盖这个state对象
const change = () => {
Test.$state = {
current: 1024,
name: '罗城将军'
}
}
</script>
<style scoped>
</style>第五种修改State的方式
调用actions里面的方式
在 src/store/index.ts 里面的actions里面写个方法
import { defineStore } from 'pinia';
import { Names } from './store-name';
export const useTestStore = defineStore(Names.Test, {
state:()=>{
return {
current:1111,
name: '小满111'
}
},
getters:{ // 类似computed计算属性 同样有缓存的
},
actions:{ // 类似 methods方法 可以做同步、异步操作 提交state
setCurrent(num:number){ // 注意此处不要写箭头函数,否则this指向就不对了
this.current = num;
}
}
});再在组件里面调用
<template>
<div>
pinia: {{ Test.current }} --- {{ Test.name }}
<button @click="change">change</button>
</div>
</template>
<script setup lang="ts">
import {useTestStore} from './store';
const Test = useTestStore();
// 第五种
const change = () => {
Test.setCurrent(5173); // 直接调用setCurrent函数
}
</script>
<style scoped>
</style>到此这篇关于Vue3中使用Pinia修改State的方法的文章就介绍到这了,更多相关vue3使用Pinia修改state内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇vue动态路由:路由参数改变,视图不更新问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了精读《Vue3.0 Function API》，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要为大家详细介绍了vue实现移动端图片裁剪上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
Vue3+ElementPlus el-date-picker设置可选时间范围的示例代码
在Vue3中使用Element Plus的el-date-picker组件设置可选时间范围，你可以使用disabled-date属性，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-07-07
这篇文章主要为大家详细介绍了使用Element+vue实现开始与结束时间限制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章介绍了vue使用Vuex状态管理模式的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-04-04
这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
下面小编就为大家带来一篇解决vue.js在编写过程中出现空格不规范报错的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要给大家介绍了Vuex和前端缓存的整合策略的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面随着小编一起来看看吧。2017-05-05
本篇文章主要介绍了浅谈vue项目可以从哪些方面进行优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论