超越vuex的男人--pinia

   vuex官方定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
   pinia官方定义：Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞......

用法上的区别:pinia取消掉了vuex的mutation属性，并且改变了action只能提交异步行为来改变值状态，pinia中state以返回值的形式定义…

用法:

npm install pinia

import { createPinia } from 'pinia'   //vue3的main.js中

app.use(createPinia())

安装完毕进入使用
src文件夹下面新建store文件夹，store下面新建index.js用来存放pinia内容
在index.js中编写的内容

import { defineStore, storeToRefs } from 'pinia'
export const useStore = defineStore('tjq', {   //参数一‘tjq’是pinia的id名任意命名

	// state定义为函数返回值的形式
		state: () =>         
	({
		age: 18,
		arr: [
			{ name: 'tjq' },
			{ name: 'hyq' },
		]
	}),
	getters: {
		age2: state => state.age * 2
	},
	actions: {
		fn() {
			this.age++
		}
	}

})

使用pinia
在需要使用pinia的文件下加入引用代码

import { useStore } from "./store/index";
const store = useStore();//如果这里大家喜欢使用解构赋值那么需要继续引入一个storeToRefs 来达到响应式效果

此时我们定义的store中就包含了pinia中的所有属性(state、action、getter等等)
直接在页面上引用即可

    {{ store.age }} 
    {{ store.age2 }}      

修改pinia中的state
1.直接修改state

    <button @click="store.age++">直接修改修改store</button>

2.$patch修改

<button @click="fn3">$patch函数形式</button>
<script setup>  
//setup语法糖vue3的内容
function fn3() {
  store.$patch((state) => {
    (state.age += 10), 
    state.arr.push({ name: "lyf" });
  });
}
</script>

$patch和直接修改的区别，直接修改时，如果你同时修改两个state的内容，那么vue变化进行两次的页面更新，造成性能消获，而patch不会出现这种问题
3.通过action修改(并且可以进行异步修改)

   <button @click="store.fn()">修改store</button>

4.重置整个state

    <button @click="store.$reset()">重置整个state</button>
        <!--通过$reset重置整个state  -->

5.替换整个state

<button @click="fn4">整个store替换</button>
   <!--通过$state  -->
<script>
function fn4() {
  store.$state = {
    age: 1000,
    arr: [123, 456],
  };
}
</script>

如有不足清点击链接查看官方文档:Pinia