极致简单
export const state = reactive({})
优点
1 .拆分非常简单
2 .每一个写起来非常简单
3 .mutation 被废弃
4 .完整支持ts
5 .基本和组合式语法一摸一样，没有任何学习成本。
6 .大小1lkb
7 .可扩展性非常好
8 .支持服务端渲染
9 .也没有action,dispatch也没有,有的仅仅是数据，和修改数据的方法，导出这两个
10 .可以让store 有循环依赖关系
11 .在 Pinia 中不需要动态注册模块。store 设计之初就是动态的，只有在需要时才会被注册。如果一个 store 从未被使用过，它就永远不会被 “注册” 。这个确实，每次使用的时候，会有一个模块安装的log提示你，
12 .支持热更新
最坑的点
1 .引入一个全局的变量，使用的时候还是要做是否存在的判断,因为还是会出现一种情况，就是一些状态在这个组件内是需要去服务端取得，取完之后放到pinna里面，然后再从这里面取出来。或者说这些状态的选取还要再更上一层.现在是会遇到首次渲染的的时候没有值，报错，但是一会值返回。这里又有了的情况
const authUserStore = useAuthUserStore()
const firstName = computed(() => authUserStore.firstName)
const fullName = computed(() => authUserStore.fullName)
好的实践
1 .用ref来定义数据结构，更新的时候直接.value就可以了
进阶
1 .写插件 https://pinia.vuejs.org/zh/core-concepts/plugins.html 后续慢慢看吧
核心概念 store
1 .承载着全局状态.是一个永久存在的组件，每个组件都可以读取和写入他。
2 .state,getter,action -> data,computed,methods 。这是pinna的价值所在，减少心智负担，收敛概念，能用vue原生语法实现的，尽量靠经原来的语法和概念
import {ref} from 'vue'
import { defineStore } from 'pinia'
export const useUserInfoStore =defineStore('userInfo',()=>{
//userInfo 这个id用来链接store和devtools
let userInfo=ref(null)
//data
function setUserInfo(value){
userInfo.value=value
}
//methods
return {
userInfo,setUserInfo
//导出数据和方法
}
})
3 .ref() 就是state属性，computed就是getter,function就是action
4 .只要不调用useUserInfo，store实例时不会被创建的
5 .为了代码分割和类型推断，应该尽可能的拆分store，一类写一个store，不要都写在一个里面
6 .从 store 中提取属性时保持其响应性，你需要使用 storeToRefs()。它将为每一个响应式属性创建引用。 为啥他不能帮我做好这个呢。直接解构会失去响应性
首先判断是否为vue2环境，如果是vue2环境，直接使用toRefs将store转换为一个普通对象；如果不是vue2环境，首先获取store的原始对象，然后遍历原始对象的键值，在遍历过程中，只会处理ref（ref类型的值包括store中的state与getter，getter会被转为计算属性）与reactive类型的值，对于符合条件的值，会将这些值转为ref类型的值，然后将其复制到一个新的对象中refs中，最后返回refs
细节
1 .store的实例可以直接访问定义的state。并且可以对他进行读写
2 .实例的patch函数之后。
<script setup>
const someStore = useSomeStore()
// this subscription will be kept even after the component is unmounted
someStore.$subscribe(callback, { detached: true })
</script>
5 .刚才说的场景是，依赖一个变量去算function 函数。算一个组件有没有权限。根据有没有权限来展示图标,但是第一时间又不能拿到。难道要写多个computed吗。
持久化到本地
watch(
pinia.state,
(state) => {
// 每当状态发生变化时，将整个 state 持久化到本地存储。
localStorage.setItem('piniaState', JSON.stringify(state))
},
{ deep: true }
)
6 .getter写法虽然比较繁琐，但是他的this，可以访问整个store里面的变量，然后返回,还可以访问其他store的getter
export const useStore = defineStore('main', {
state: () => ({
count: 0,
}),
getters: {
// 类型是自动推断出来的，因为我们没有使用 `this`
doubleCount: (state) => state.count * 2,
// 这里我们需要自己添加类型(在 JS 中使用 JSDoc)
// 可以用 this 来引用 getter
/**
* 返回 count 的值乘以 2 加 1
*
* @returns {number}
*/
doubleCountPlusOne() {
// 自动补全 ✨
return this.doubleCount + 1
},
},
})
Actions 定义业务逻辑的完美选择
在组件外使用pinia 的数据
1 .但是这种写法不是杂交了吗、、难顶，为啥官网api给的是这个？？？
网友评论