pinia
小满zs
我是真菜
展开
-
学习Pinia 第七章(pinia插件)
pinia 和 vuex 都有一个通病 页面刷新状态会丢失我们可以写一个pinia 插件缓存他的值视频教程(强烈建议) Vue3 + vite + Ts + pinia + 实战 + 源码_哔哩哔哩_bilibili原创 2022-03-11 20:28:56 · 10136 阅读 · 13 评论 -
学习Pinia 第六章(API)
1.$reset重置store到他的初始状态state: () => ({ user: <Result>{}, name: "default", current:1}),Vue 例如我把值改变到了10const change = () => { Test.current++}调用$reset();将会把state所有值重置回 原始状态...原创 2022-03-10 21:27:30 · 5622 阅读 · 3 评论 -
学习Pinia 第五章(Actions,getters)
Actions(支持同步异步)1.同步 直接调用即可import { defineStore } from 'pinia'import { Names } from './store-naspace'export const useTestStore = defineStore(Names.TEST, { state: () => ({ counter: 0, }), actions: { increment() {原创 2022-03-09 14:36:47 · 7913 阅读 · 2 评论 -
学习Pinia 第四章(解构store)
在Pinia是不允许直接解构是会失去响应性的const Test = useTestStore()const { current, name } = Testconsole.log(current, name);差异对比修改Test current 解构完之后的数据不会变而源数据是会变的<template> <div>origin value {{Test.current}}</div> <div> pinia原创 2022-03-08 23:41:30 · 8188 阅读 · 5 评论 -
学习Pinia 第三章(State)
1.State 是允许直接修改值的 例如current++<template> <div> <button @click="Add">+</button> <div> {{Test.current}} </div> </div></template><script setup lang='ts原创 2022-03-08 18:59:06 · 8741 阅读 · 11 评论 -
学习Pinia 第二章(初始化仓库Store)
1.新建一个文件夹Store2.新建文件[name].ts 3.定义仓库Storeimport { defineStore } from 'pinia'4.我们需要知道存储是使用定义的defineStore(),并且它需要一个唯一的名称,作为第一个参数传递我这儿名称抽离出去了新建文件store-namespace.tsexport const enum Names { Test = 'TEST'}store 引入import { defineStore }原创 2022-03-07 23:50:59 · 11198 阅读 · 2 评论 -
学习Pinia 第一章(介绍Pinia)
前言Pinia.js 有如下特点:完整的 typescript 的支持; 足够轻量,压缩后的体积只有1.6kb; 去除 mutations,只有 state,getters,actions; actions 支持同步和异步; 没有模块嵌套,只有 store 的概念,store 之间可以自由使用,更好的代码分割; 无需手动添加 store,store 一旦创建便会自动添加;...原创 2022-03-07 22:34:27 · 10396 阅读 · 1 评论