pinia状态管理工具

Pinia状态管理工具

参考地址：https://pinia.vuejs.org/zh/

搭建pinia环境

安装：

npm i pinia

编写main.ts

import { createApp } from "vue";
import App from "./App.vue";
//引入pinia
import { createPinia } from "pinia";

const app = createApp(App);
//创建pinia
const pinia = createPinia();
//安装pinia
app.use(pinia);
app.mount("#app");

存储读取数据

存储

​ 第一个文件位于：/src/store/count.ts，第二个文件位于：/src/store/loveTalk.ts

import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
  state() { //真正存储数据的地方
    return {
      sum: 6
    }
  }
});

//################################  另一个 ################################
import { defineStore } from 'pinia'

export const useLoveTalkStore = defineStore('talk', {
  state() { //真正存储数据的地方
    return {
      talkList: [
        { id: "1", title: "今天你有点怪, 哪里怪? 怪好看!" },
        { id: "2", title: "草莓、蓝莓、蔓越莓、今天想我没? " },
        { id: "3", title: "心里给你留了一块地, 我的死心踏地" },
      ]
    };
  }
});

读取

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

  const countStore = useCountStore();
  //以下两种方式都可以拿到对应state的数据
  // console.log(countStore.$state.sum);
  // console.log(countStore.sum);

  //################################  另一个 ################################
  import { useLoveTalkStore } from "@/store/loveTalk";

  //数据
  const talkList = useLoveTalkStore();
  console.log(talkList.talkList);

修改数据

修改位置代码：

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

  const countStore = useCountStore();

  //数据
  let n = ref(1);

  //方法
  function add() {
    //第一种修改方式
    // countStore.sum += n.value;

    //第二种修改方式, 可以批量修改
    // countStore.$patch({
    //   sum: 888,
    //   school: '尚硅谷',
    //   address: '北京'
    // })

    //第三种修改方式 这种方式需要去count.ts文件中的actions中编写方法
    countStore.increment(n.value);
  }

配置文件代码：

import { defineStore } from 'pinia'

export const useCountStore = defineStore('count', {
  actions: {  //放置的是一个一个的动作函数，用于响应组件中的"动作"
    increment(value:any) {  //同样的逻辑可以提取到此处复用
      // console.log('increment 被调用了', value);
      // console.log(this.sum);
      this.sum += value;
    }
  },
  state() { //真正存储数据的地方
    return {
      sum: 6,
      school: 'atguigu',
      address: '宏福科技园'
    }
  }
});

storeToRefs 解构store并只关注数据

​ 使用storeToRefs 只关注store中的数据，不会把所有都解构为响应式，如果使用toRefs就会把countStore中所有变为响应式代价太大。

  const {sum, school, address} = storeToRefs(countStore)  

getters的使用—类比计算属性

​ 概念：当state中的数据，需要经过处理后再使用时，可以使用getters配置。类似计算属性

1、对应配置（与store同级）：

  getters: {
    // bigSum(state) {
    //   return state.sum * 10;
    // },

    bigSum:state => state.sum * 10,

    // upperSchool(state) {
    //   console.log("!!!", this);
    //   return state.school.toUpperCase();
    // },

    upperSchool():string {
      return this.school.toUpperCase();
    }
  },

2、使用查看：

  //###### 可以发现能够从countStore中直接解构出来使用
  const {sum, school, address, bigSum, upperSchool} = storeToRefs(countStore)

$subscribe 订阅—有点监听的感觉

通过 store 的 $subscribe() 方法侦听 state 机器变化：

  talkStore.$subscribe((mutate, state) => {
    console.log('talkStore里面保存的数据发生了变化', mutate, state);
    localStorage.setItem('talkList', JSON.stringify(state.talkList));
  })

结合下面这种编写方式可以做一些初始化的东西

  state() { //真正存储数据的地方
    return {
      // talkList: [
      //   { id: "1", title: "今天你有点怪, 哪里怪? 怪好看!" },
      //   { id: "2", title: "草莓、蓝莓、蔓越莓、今天想我没? " },
      //   { id: "3", title: "心里给你留了一块地, 我的死心踏地" },
      // ]
      talkList:JSON.parse(localStorage.getItem('talkList') as string) || []
    };
  }

store组合式写法

import { defineStore } from 'pinia'
import axios from 'axios';
import { nanoid } from 'nanoid';
import { reactive } from "vue";

export const useLoveTalkStore = defineStore("talk", () => { //这个参数就类似setup函数
  // talkList 就是 state
  const talkList = reactive(
    JSON.parse(localStorage.getItem('talkList') as string) || []
  )

  //getAtalk函数相当于 action
  async function getATalk() {
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    // let {data: { content: title }} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json');
    let title = "获取到的一句话";
    // 把请求回来的字符串，包装成一个对象
    let obj = { id: nanoid(), title };
    // 放到数组中
    talkList.unshift(obj);
  }

  return {talkList, getATalk};
});