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<10){
                    this.sum+=value
                }
            }
        }
      })

    storeToRefs只会关注store中的数据，不会对方法进行包裹，只是让数据变成响应式的

    在要使用的的页面需要引入你使用的数据

    import{useCountStore} from'@/store/count';

    import {storeToRefs} from  'pinia';

    const countStore=useCountStore()

    上面的几种修改方式需要在页面定义一个方法，把修改的方式放置在方法里面

    页面中的{{countStore.xxx}}可以简写{{xxx}}

    前提是要解构 const {xxx,yyy,ddd,zzzz}=storeToRefs(useCountStore)

    countStore.incremnet(n.value)  //n是定义的响应式数据

    getters:{}    //计算

    getters: {

        fangdaSum(state){

            return  state.sum*10

        }

    }

    getters: {

     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()

    }