(八)使用 $patch 同时修改多个状态
状态 使用 修改 多个 同时 Patch
2023-06-13 09:17:09 时间
一、使用 $patch
同时修改多个状态
store.js
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useNoteStore = defineStore('note', () => {
const noteList = ref([
{
title: '标题1',
desc: '详情内容1'
}
])
/**
* 定义一个保存搜索词的响应的 ref ,并使用 getters
*/
const searchText = ref('')
const searchNotes = computed(() => {
// 如果搜索框为 空 就展示所有 noteList
if(searchText.value === '') {
return noteList
} else {
return noteList.value.filter(note => {
return noteList.title.includes(state.searchText)
})
}
})
return {
noteList, // state 数据
searchText, // 搜索框内容
searchNotes, // 过滤过后的计算属性
}
})
- 在组件中同时修改多个
state
<template>
<div>{{newNoteList.searchNotes}}</div>
</template>
<script setup>
import { useNoteStore } from '@/store/note.js'
// 把返回值放到一个新的变量里面
const noteStore = useNoteStore()
functions addNote() {
noteStore.$patch({
notes: [
...noteStore.noteList,
{
title: '标题',
desc: '详细内容'
}
],
searchText: ''
})
}
</script>
总结-写在最后
总计
$patch
是一个对象,里面修改的就是 store
当中 state
的状态了
相关文章
- 使用 Prometheus 监控 eKuiper 规则运行状态
- 如何在 React 应用中使用 Hooks、Redux 等管理状态
- Vuex 3.x 状态管理模式
- 【面试高频题】难度 3/5,状态压缩 DP 及其优化
- pytest学习和使用14-Pytest用例执行结果有哪几种状态?
- eBPF 入门开发实践指南六:捕获进程发送信号的系统调用集合,使用 hash map 保存状态
- Vue状态管理——Vuex
- React/ReactNative 状态管理: redux 如何使用
- 【Kotlin 协程】协程取消 ② ( CPU 密集型协程任务取消 | 使用 isActive 判定协程状态 | 使用 ensureActive 函数取消协程 | 使用 yield 函数取消协程 )
- 全景AR增强监视系统对接SkeyeIVMS视频云管控系统实现软硬件资源的健康状态管理(三)
- 查看端口状态的python代码详解编程语言
- Python获取CPU使用率、内存使用率、网络使用状态详解编程语言
- java 获取线程状态 判断线程是否已启动详解编程语言
- Hiberante持久化对象的3种状态详解编程语言
- 查看Linux下任务状态的查看方法(linux任务状态)
- 使用命令检查Redis服务器的运行状态(检查redis状态命令)
- 探查Redis运行状况更新为启动状态(获取redis启动状态)
- 状态保持使用其他方式实现登录状态保持(不用redis实现登录)
- 关于WPF使用MultiConverter控制Button状态的详细介绍