vue3中的pinia

vue3的pinia集中式状态管理

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

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

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

     const app = createApp(App)

     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

    2批量修改

   constStore.$patch({
        sum:888,
        school:'明德'
     })

    3 借助actions修改(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 { 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()
    }