Vue3-Pinia快速入门

1.安装pinia

npm install pinia -save

2.在main.js中导入并使用pinia 

// 导入pinia

import { createPinia } from "pinia";
const pinia = createPinia();

//使用pinia
app.use(pinia)

app.mount('#app')

 3.在src目录下创建包：store，表示仓库

4.在store里面创造一个airTicket.js,用来存放搜索机票相关数据或者函数

//定义关于counter的store
import { defineStore } from 'pinia'

//defineStore 是返回一个函数 函数命名最好有use前缀，根据函数来进行下一步操作
const useSearchAir = defineStore('airTicket',{
    state: () => {
        return{
            departPoint:"",
            arrivePoint:"",
            departTime:"",
            arriveTime:"fdsa",
        }

    },
    // 修改方法
    actions: {
        setName(name){
            this.departPoint = name;
        },
        setPassword(p){
            this.password = p;
        },
        setPhone(p){
            this.phone = p;
        }
    }
})

export default useSearchAir()

5.导入仓库：

import useSearchAir from "@/store/airTicket";
let useAirTicket = useSearchAir;

6.进行相关操作：

比如：

修改数据，打印数据

//修改数据，
useAirTicket.$patch({
  arrivePoint:"改革发u",
  arriveTime:"213234"

})

//打印数据
console.log(useAirTicket.arrivePoint)

8.注意事项

对仓库里面的数据操作不能直接解构，

比如这样

const {arrivePoint, arrivvTime} = useAirSearch

这样使用就比较方便，但是这样的话这2个结构出来的数据就不具备响应性了

如果要解构，需要这样：

 import { storeToRefs } from 'pinia'

const {arrivePoint, arrivvTime} = storeToRefs(useAirSearch)

这样就保留了响应性