Pinia上风
Pinia是一个全新的Vue状态管理库，是Vuex的取代者，尤雨溪强势保举
1.Vue2 和 Vue3 都能支持
2.扬弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库
3.不须要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化
4.TypeScript支持
Pinia 根本使用
初始化项目： npm init vite@latest
安装Pinia: npm i pinia
挂载Pinia
import { createPinia } from 'pinia'const pinia = createPinia()createApp(App).use(pinia)创建Store
import { defineStore } from "pinia";export const useStore = defineStore('main', { state: () => { return { msg: 'hello world hhhh', Number: 1 } }, getters: {}, actions: {}})使用Store
<template> <div>HelloWorld</div> <div>{{store.msg}}</div></template><script setup lang="ts">import { useStore } from "../index";const store = useStore()</script>解构Store
当store中的多个参数须要被使用到的时间，为了更轻便的使用这些变量，我们通常接纳布局的方式一次性获取全部的变量名
ES传统方式解构(能获取到值，但是不具有相应性)
<template> <div>HelloWorld</div> <div>{{ store.msg }}</div> <div>{{ number }}</div> <button @click="number++">+++</button></template><script setup lang="ts">import { useStore } from "../index";const store = useStore();const { number } = store;</script><style scoped></style>Pinia解构方法：storeToRefs
<template> <div>HelloWorld</div> <div>{{ store.msg }}</div> <div>{{ number }}</div> <button @click="number++">+++</button></template><script setup lang="ts">import { storeToRefs } from "pinia";import { useStore } from "../index";const store = useStore();// const { number } = store;const { number } = storeToRefs(store);</script><style scoped></style>多条数据修改
通过根本数据修改方式去修改多条数据也是可行的，但是在 pinia 官网中，已经明白体现$patch 的方式是颠末优化的，会加快修改速率，对性能有很大利益，以是在举行多条数据修改的时间，更保举使用$patch
$patch 方法可以担当两个范例的参数，函数 和 对象
$patch + 对象
$patch + 函数： 通过函数方式去使用的时间，函数担当一个 state 的参数，state 就是 store 堆栈中的 state
const change = () => { store.$patch({ msg: 'hhhhhhhhhhhh', number: store.number + 100 })}const change1 = () => { store.$patch((state)=> { state.msg = 'hhhhhhhhhhhh' state.number = state.number + 100 })}Pinia中的Getters
Pinia 中的 getter 和 Vue 中的盘算属性险些一样，在获取 State值之前做一些逻辑处理惩罚getter 中的值有缓存特性，如果值没有改变，多次使用也只会调用一次添加 getter方法
getters: { addNumber(state) { return state.number * state.number1 } },<div>{{store.addNumber}}</div><div>{{store.addNumber}}</div><div>{{store.addNumber}}</div> //多次调用也只会实验一次getter 中不但可以传递 state 直接改变数据状态，还可以使用 this 来改变数据,但要分析对应范例
getters: { addNumber():any { // return state.number * state.number1 return this.msg } },store之间的相互调用
在 Pinia 中，可以在一个 store 中 import 别的一个 store ，然后通过调用引入 store 方法的情势，获取引入 store 的状态
export const useStore = defineStore('use', { state: () => { return { msg: 'hello world hhhhxxx', number: 2, number1: 3 } }, getters: { addNumber():any { // return state.number * state.number1 return this.msg } }, actions: { }})export const mainStore = defineStore('main', { state: () => { return { msg: 'hello world hhhh', number: 1 } }, getters: { addNumber() { console.log(useStore().msg); } }, actions: {}})总结
总得来说，Pinia 就是 Vuex 的替换版，可以更好的兼容 Vue2，Vue3以及TypeScript。在Vuex的根本上去掉了 Mutation，只生存了 state, getter和action。Pinia拥有更轻便的语法， 扁平化的代码编排，符合Vue3 的 Composition api |
