第一章 安装-介绍
前言 全局状态管理工具
Pinia.js 有如下特点：
- 完整的 ts 的支持；
- 足够轻量，压缩后的体积只有 1kb 左右；
- 去除 mutations，只有 state，getters，actions；
- actions 支持同步和异步；
- 代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个 store 都是独立的
- 无需手动添加 store，store 一旦创建便会自动添加；
- 支持 Vue3 和 Vue2
让我们来看看他跟VueX的区别
pinia |
VueX |
State |
State |
Getters |
Getters |
Mutaions |
|
Actions 同步异步都支持 |
Actions |
[pinia官方文档][https://pinia.vuejs.org/] or [pinia在GitHub地址][https://github.com/vuejs/pinia]
1. 起步 安装
yarn add pinia //你自己选一个就行了，看你用哪个包管理器 npm install pinia//小满在这里有加一个-S，这是生产模式，还有一个是-D是开发模式 //生产模式(依赖-S)：会把包添加到 package.json 的 dependencies 下，这些包在项目打包上线后依然需要使用项目才能正常运行 //开发模式(依赖-D)：会把包添加到 package.json 的 devDependencies 下，这些包只在做项目的时候会使用到，在项目打包上线后不依赖于这些包项目依然可以正常运行
2. 引入注册 Vue3
在main.ts或者js中引入，这得看你用的是js还是ts了哈哈
因为main.ts是用来放公共API的地方，所以在这里引入~
import { createApp } from 'vue' import App from './App.vue' import {createPinia} from 'pinia'//引入 //Vue3叫createPinia //Vue2叫PiniaVuePlugin const store = createPinia()//调用一下 let app = createApp(App) app.use(store)//使用pinia app.mount('#app')
Vue2 使用
import { createPinia, PiniaVuePlugin } from 'pinia' Vue.use(PiniaVuePlugin) const pinia = createPinia() new Vue({ el: '#app', // other options... // ... // note the same `pinia` instance can be used across multiple Vue apps on // the same page pinia, })
第二章（初始化仓库 Store）
1. 新建一个文件夹 Store
2. 新建文件 [name].ts
当然，通常是叫index会好一点，不过你想怎么起的话其实无所谓
3. 定义仓库 Store
import { defineStore } from 'pinia'
前三步一步到位了兄弟们
4. 我们需要知道存储是使用定义的 defineStore()，并且它需要一个唯一的名称，作为第一个参数传递
这儿名称抽离出去了
新建文件 store-namespace/index.ts，嗯，其实就是命名空间
//namespace下的index.ts文件，抽离出来的名字都在这里了 export const enum Names {//暴露出去并且枚举 Test = 'TEST' }
store 引入
import { defineStore } from 'pinia' import { Names } from './store-namespace'//抽离出去的名字最终还是需要引入回来store文件进行使用的 export const useTestStore = defineStore(Names.Test, { state()=>{ return{ current:1 name:"小满、班花姐姐，洛佬" } } }) //通过源码我们可以看到这里是： state?:()=> S;//意思就是一个箭头函数，可选填入
这个名称，也称为 id，是必要的，Pania 使用它来将商店连接到 devtools。将返回的函数命名为 use... 是可组合项之间的约定，以使其使用习惯。
5. 定义值
State 箭头函数 返回一个对象 在对象里面定义值
箭头函数在源码定义了，刚刚才聊到的，对吧
import { defineStore } from 'pinia' import { Names } from './store-namespce' //defineStore一共就两个参数，一个是名字，一个是我们要放的数据内容 export const useTestStore = defineStore(Names.Test, {//请注意，这是Name.Test 不是Name,Test state:()=>{ return { current:1 } } })
import { defineStore } from 'pinia' import { Names } from './store-namespce' export const useTestStore = defineStore(Names.Test, { state:()=>{ return { current:1 } }, //类似于computed 可以帮我们去修饰我们的值 getters:{ }, //类似methods 可以操作异步 和 同步 提交state actions:{ } })
要使用的话，直接在你想要使用的文件里面引入store商店就行了
//例子 import {useTestStore} from "./store" //然后进行调用一下 const Test = useTestStore()
案例
以下为纯代码，无注释的可直接运行代码
//store下的index文件 import {defineStore} from "pinia"; import {Names} from "./store-name"; export const useTestStore = defineStore(Names.TEST,{ state:()=>{ return{ name:"洛洛", Nickname:"洛佬，肥洛，狗洛，洛爆了，有事请问洛洛" } } })
//store下的store-name文件 export const enum Names{ TEST = 'TEST' }
//App.vue主文件 <template> <div>大家好！{{Test.name}}是一个外号为：{{Test.Nickname}}的人</div> </template> <script setup lang="ts"> import {useTestStore} from "./store" const Test = useTestStore() </script> <style scoped> </style>
第三章 — state
拥有5种方式来进行修改值
1.State 是允许直接修改值的 例如 current++
<template> <div> <button @click="Add">+</button> <div> {{Test.current}} </div> </div> </template> <script setup lang='ts'> import {useTestStore} from './store' const Test = useTestStore() const Add = () => { Test.current++ //就直接修改就完事了，在VueX中是不被允许的 } </script> <style> </style>
2. 批量修改 State 的值
在他的实例上有 $patch 方法可以批量修改多个值
<template> <div> <button @click="Add">+</button> <div> {{Test.current}} </div> <div> {{Test.age}} </div> </div> </template> <script setup lang='ts'> import {useTestStore} from './store' const Test = useTestStore() const Add = () => { Test.$patch({ current:200, age:300 }) } </script> <style> </style>
3. 批量修改函数形式
推荐使用函数形式 可以自定义修改逻辑
可以在里面进行if判断，for循环啥的都可以，明显灵活很多
<template> <div> <button @click="Add">+</button> <div> {{Test.current}} </div> <div> {{Test.age}} </div> </div> </template> <script setup lang='ts'> import {useTestStore} from './store' const Test = useTestStore() const Add = () => { Test.$patch((state)=>{//这里的state就是我们在store仓库中的state(然后里面return了数值) state.current++; state.age = 40 }) } </script> <style> </style>
与第二章案例配套代码
<template> <div>大家好！{{Test.name}}来自{{Test.form}}</div> <button @click="change">修改</button> </template> <script setup lang="ts"> import {useTestStore} from "./store" const Test = useTestStore() const change = ()=>{ Test.$patch((state)=>{//state就是我们store仓库内的数据 state.name = "小余" state.form = "QQ群855139333" }) } </script> <style scoped> </style>
4. 通过原始对象修改整个实例
$state 您可以通过将 store 的属性设置为新对象来替换 store 的整个状态
缺点就是必须修改整个对象的所有属性
<template> <div> <button @click="Add">+</button> <div> {{Test.current}} </div> <div> {{Test.age}} </div> </div> </template> <script setup lang='ts'> import {useTestStore} from './store' const Test = useTestStore() const Add = () => { Test.$state = { current:10,//全部都得修改，不然会报错，你也可以修改成一样的数值或者内容，但是不能不写 age:30 } } </script> <style> </style>
配合第二章的案例
//App.vue文件 <template> <div>大家好！{{Test.name}}来自{{Test.form}}</div> <button @click="change">修改</button> </template> <script setup lang="ts"> import {useTestStore} from "./store" const Test = useTestStore() const change = ()=>{ Test.$state = { name:"小余", form:"泉州" } } </script> <style scoped> </style>
5. 通过 actions 修改
定义 Actions
在 actions 中直接使用 this 就可以指到 state 里面的值
import { defineStore } from 'pinia' import { Names } from './store-naspace' export const useTestStore = defineStore(Names.TEST, { state:()=>{ return { current:1, age:30 } }, actions:{ setCurrent () {////不能使用箭头函数，因为this的指向会出现问题 this.current++ //this是由定义好的store实例调用，箭头函数只会保存当前作用域的this，所以需要传统方式定义函数，根据调用者来改变this指向 } } })
使用方法直接在实例调用
<template> <div> <button @click="Add">+</button> <div> {{Test.current}} </div> <div> {{Test.age}} </div> </div> </template> <script setup lang='ts'> import {useTestStore} from './store' const Test = useTestStore() const Add = () => { Test.setCurrent() } </script> <style> </style>
Vue3——pinia部分(小满版本)（二）https://developer.aliyun.com/article/1470386
