Pinia仓库

1. 环境搭建

手动搭建：

npm install pinia

main.js：import { createPinia } from 'pinia' ==> let pinia=createPinia()==>app.use(pinia)

脚手架：

npm init vue@latest => 第四个选yes（Add Pinia）=>进入到创建的项目文件夹中 => npm i => npm run dev运行项目

2. 使用

引入：import { useCounterStore } from "@/stores/counter.js"。注意，引入的名字必须和stores/counter.js中导出的文件相同。

stores/counter.js文件的格式是安装脚手架时已经配置好的，只要按照需求更改就行。

使用：通过打印官方给的实例useCounterStore发现它是一个函数，那要使用就需要调用，调用结果为一个代理对象。可以直接使用对象的点语法来取属性；也可以通过响应式结构赋值toRefs（需要从vue中引入），将对象里面的所有属性取出来放到变量中。使用toRefs，组件可以解构js文件中返回的响应式对象且不会失去响应性。

// 没有结构赋值时使用    
app---{{ obj.count }}---{{ obj.doubleCount }}
<button @click="obj.increment">++</button>

let obj = useCounterStore();

// 响应式结构赋值时使用
app---{{ count }}
<button @click="increment">++</button>

let obj = useCounterStore();
let { count, doubleCount, increment } = toRefs(obj)

 通过运行结果可以验证，当父组件中的更改count时，子组件中使用到的count也跟着更改。

3. 子store

stores文件夹中可以写多个文件。和vuex仓库组合式API中的模块moduls比较类似。