pinia学习

1.安装

yarn add pinia
OR 使用npm
npm install pinia

pinia是Vue的存储库，允许跨组件/页面共享状态。
pinia和vuex的作用一样，充当一个存储数据的作用，存储在pinia的数据允许我们在各个组件中使用。

pinia优点：
  1.pinina只有state，getter,action。
  2.pinia中action支持同步和异步，vuex不支持【vue2中action是异步的去commit操作，而mutations是同步的】。
  3.良好的Typescript支持
  4.无需创建各个模块嵌套，pinia中每个store都是独立的，互相不影响。
  5.体积非常小，只有1kb左右
  6.pinia支持插件来扩展自身功能
  7.支持服务端渲染

2.创建一个pinia实例（根store）并将其传递给应用

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia();
const app = createApp(App);

app.use(pinia);
app.mount('#app');

3.Store

store 是一个保存状态和业务逻辑的实体。
有三个概念： state， getter, action。

4.创建一个store例子

// stores/count.js
store 是用 defineStore() 定义的，他的第一个参数要求是一个独一无二的名字：
import { defineStore } from 'pinia';

export const useCountStore = defineStore('main',{
  // 其他配置...
  state:()=>({
    count: 0
  }),
  getters:{
    double: (state)=>state.count * 2
  },
  actions: {
    increment(){
      this.count++;
    }
  }
})

使用方式：
//some.vue
<script setup>
import useCountStore from '@/stores/count'
import { computed } from 'vue'
import {storeToRefs} from 'pinia';//为了从store中提取属性时保持其响应式，需要引入 storeToRefs

const counter = useCountStore();
const { count } = storeToRefs(counter);
const { increment } = counter;

counter.count++;
counter.increment();
//OR
counter.$patch({ count: counter.count+1 })

const doubleCount = computed(()=> counter.count * 2);

</script>

 5.重置state

调用 store的 $reset()方法将state重置为初始值。

例如：
const store = useStore();
store.$reset();

 6.举例demo

项目搭建
执行命令：
   npm create vite@latest my-vite-app --template vue-ts

运行项目：
   npm install
   npm run dev

安装pinia(见上文)
   npm install pinia

修改main.js，引入pinia提供的createPinia方法，创建根存储。
//main.ts
import { createApp } from 'vue';
import App from './App.vue'
import { createPinia } from 'pinia';
const pinia = createPinia();

const app = createApp(App);
app.use(pinia);
app.mount('#app');

在src目录下新建store文件夹，用来存放创建的各种store，然后在该目录下新建 user.ts 文件，主要用来存放与user相关的store。
//例如：src/store/user.ts
import { defineStore } from 'pinia';

export const userStore = defineStore('user',{
  state:()=>({
    userInfo:{
      name: 'sunnyeve',
      age: 18
    },
    sayHello: 'hello world',
    count: 0,
    items: []
  }),
  getters:{ //相当于computed，作用是返回一个新的结果，会被缓存
    getDoubleAge:(state)=>{
      return state.age * 2;
    },
    getUserInfo():string{
      return this.name + this.getDoubleAge
    }
  },
  actions:{
    changeName(name: string){
      this.name = name;
    }
  }
})

//使用store， /src/views/home.vue
<template>
  <div>sayhello: {{sayHello}}</div>
  <div>{{userInfo.name}}</div>
  <div>{{userInfo.age}}</div>
  <button @click='changeAge'>点击更改age</button>
  <button @click='reset'>重置store</button>
  <button @click='patchStore'>批量更改数据</button>
</template>
<script setup lang="ts">
  import { userStore } from '@/store/user';
  import { storeToRefs } from 'pinia';
 
  const useUserStore = userStore();
  const { userInfo, count, sayHello } = storeToRefs(useUserStore);
  const changeAge = ()=>{
    useUserStore.age++;
  }
  const reset = ()=>{
    useUserStore.$reset();//这个方法会将store中的数据变为初始状态，页面也会更新。
  }
  const patchStore=()=>{
    useUserStore.$patch({
      count: 10,
      sayHello: 'hello world~~~'
    })
  }
  //也可下面这种写法，原因在于假设state中有些字段无需更改，就可以用$patch方法接收一个回调函数方式解决
  useUserStore.$patch((state)=>{
    state.items.push({name:'xx', price: 100});
    state.hasChanged = true
  })
  //直接替换整个store, 使用store的$state方法
  useUserStore.$state = { name: 'xx', age: 18}
</script>

 

参考链接：

   https://pinia.vuejs.org/zh/getting-started.html  - 官方文档

    https://zhuanlan.zhihu.com/p/533233367