vue3中的pinia

vue3���pinia集中式状态管理

（）

    下载安装pinia 或者是在下载脚手架的时候把pinia勾选上

    如果未勾选，那么就在main.ts中引入

（）

     import {createPinia} from 'vue' //在App.vue后面引入

     const pinia=createPinia() //在创建App后面创建

     app.use(pinia)

    store 是一个保存:状态、业务逻辑的实体，每个组件都可以读取、写入它

    它有三个概念：state、getter、action,相当于组件中的data\computed和methods.

    具体编码：src/store/count.ts

    import {defineStore} from 'pinia'

    export const useCountStore=defineStore('count',{

    actions: { },  //动作

    state(){      //状态

        return {

            sum: 6,

            school:'迪思'

        }

    },

    getters:{}    //计算

    })

    修改数据的三种方式

    1直接修改

    countStore.sum=789

    第二种批量修改

     constStore.$patch({

        sum:888,

        school:'明德'

     })

    第三种： 借助action修改(action中可以编写一些业务逻辑)

    import {defineStore} from 'pinia';      export const useCountStore=defineStore('count',{        actions:{            increment(value){                if(this.sum{countStore.xxx}}可以简写{{xxx}}p     fangdaSum :state=>state.sum*5, 
    }
  
    getters: {
 
    changeSchool(state){
 
        return state.school = '第一中学'//   return  this.school.toUpperCase()
 
    }
 
    }
  
    在pinia中的actions中通过调接口拿数据  在 store下的ts文件中
 
    nanoid 是一个插件，用来生成随机的id
 
  import { nanoid } from 'nanoid'    export const useTalkStore = defineStore('talk', {        actions: {            async getlovetalk() {                //发送请求+连续解构赋值+重命名                let { data: { content: title } } = await axios.get('https:/api/link/url/rand');                //把请求回来的字符串，包装成一个对象                let obj = { id: nanoid(), title };                //放到定义的数组中                this.talkList.unshift(obj)            }        },        state(){            return {                talkList:JSON.parse(localStorage.getItem('talkList') as string)|| []            }        },    })
 
  另一种写法  组合式    import { reactive } from 'vue';    export const useTalkStore = defineStore('talk', () => {        //talkList相当于state        const talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])        //   getlovetalk相当于actions        async function getlovetalk() {            //发送请求+连续解构赋值+重命名            let { data: { content: title } } = await axios.get('https:/api/link/url/rand');            //把请求回来的字符串，包装成一个对象            let obj = { id: nanoid(), title };            //放到定义的数组中            talkList.unshift(obj)        }        return { talkList, getlovetalk }    })
 
  在需要使用的页面
 
    import { useTalkStore } from '@/store/loveTalk';
 
    import { storeToRefs } from 'pinia';
 
    const talkStore = useTalkStore();
 
    const { talkList } = storeToRefs(talkStore)
 
    talkStore.$subscribe((mutate, state) => {
 
        console.log('talkStore里面保存的数据发生了变化', mutate, state)
 
        //mutate 请求回来的数据的形式
 
        //state  以数组的形式展示所有请求的数据+以前的数据
 
        localStorage.setItem('talkList', JSON.stringify(state.talkList))
 
    })
 
    function getlovetalk() {
 
        talkStore.getlovetalk()
 
    }