四、Vue3中使用Pinia解构Store

javascript 复制代码
<template>
  <div>
    pinia原始值: {{ Test.current }} --- {{ Test.name }}
    <button @click="change">change</button>
  </div>
  <hr />
  <div>
    解构后值: {{ current }} --- {{ name }}
    <button @click="change">change</button>
  </div>
</template>
<script setup lang="ts">

import { useTestStore } from './store';
import { storeToRefs } from 'pinia';

const Test = useTestStore();

// pinia 解构不具有响应式
// const { current, name } = Test;

// 要使用storeToRefs()
const  { current, name } = storeToRefs(Test);

const change = () => {
  // Test.current++
  // 或
  current.value++
}


</script>
<style scoped></style>
相关推荐
Envyᥫᩣ9 分钟前
C#语言:从入门到精通
开发语言·c#
酷酷的阿云9 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058711 分钟前
web端手机录音
前端
齐 飞17 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
童先生30 分钟前
Go 项目中实现类似 Java Shiro 的权限控制中间件?
开发语言·go
lulu_gh_yu31 分钟前
数据结构之排序补充
c语言·开发语言·数据结构·c++·学习·算法·排序算法
神仙别闹34 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
Re.不晚1 小时前
Java入门15——抽象类
java·开发语言·学习·算法·intellij-idea
老秦包你会1 小时前
Qt第三课 ----------容器类控件
开发语言·qt
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript