pinia搭配vue3(setup)的使用（保姆级）

我们为什么要使用Pinia

pinia是Vue的一个状态管理库，跨组件通信的一种方式。可以让我们更加方便的组件通信。

Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

话不多说，先来看一个简单的小demo

1.引入包：npm i pinia

2.在main.js里面配置：

import { createPinia } from 'pinia'
  app.use(createPinia())

 3.创建一个store文件夹，store里面再创建一个index.js（注意：一定要加这个return）

import { defineStore } from 'pinia';

export const useStore=defineStore('main',{
    state:()=>{
       return{
        num:10
       }
    }
})

export default useStore;

 4.在页面中使用

import { useStore} from "../store/index"
let store= useStore()

 console.log(store.num,2222);

看看效果,可以看到成功拿到了num的值

接下来就是取值和设置值，才能符合我们的需求

直接修改

 store.num++;
  console.log(store.num,2222);

效果图可以看到num已经自增了

 

 通过$patch进行修改

  store.$patch({
    num:store.num+1
  })
  console.log(store.num,2222);

效果图

 $patch也可以修改多值

  store.$patch(state => {
         state.c++;
         state.num++;
      })

 getters:相当于计算属性,利用defineStore()中的getters属性定义，他们接收状态作为第一个参数一鼓励箭头函数使用

getters:{
        cityVal:(state)=>state.num*2,
    },

使用getters中的cityVal

在要使用.vue文件中

 console.log(333,store.cityVal);

actions：相当于组件中的methods，他们可以使用defineStore()中的actions属性定义，并且它们非常适合定义业务逻辑（既可以是同步也可以是异步）

query是页面中使用过程中传过来的值

    actions:{
        cityVals(query){
          return this.city=query;
        }
    }

页面中的.vue使用：

 直接调用这个方法进行传值

  console.log(store.cityVals('wuhan'));

到这里，pinia的需求已经足够使用了 ，欢迎指正不足