Vue3笔记——（四）Pinia

一、安装axios
1.安装axiosnpm i axios
2.引入import axios from ‘axios’;
二、安装nanoid
1.生成随机id的库 npm i nanoid
2.连续解构赋值+重命名写法

let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')

三.安装pinia
npm i pinia
在main.js中

import { createApp } from "vue";
import { createPinia } from "pinia";// 第一步引入：引入pinia
import App from "./App.vue";
const app = createApp(App);
const pinia = createPinia();// 第二步：创建pinia
app.use(pinia);// 第三步：安装pinia
app.mount("#app");

1.存储+读取数据
创建store文件夹，创建Count.ts

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

页面中进行读取

import {useCountStore} from '@/store/Count'
const countStore = useCountStore()
//以下两种都可以拿到state中的数据
console.log("@@@@@",countStore.sum);
console.log("@@@@@",countStore.$state.sum);

2.页面中进行修改

let n = ref(1); //用户选择的数字
import { useCountStore } from "@/store/Count";
import { storeToRefs } from "pinia";//storeToRefs 作用：将store里的数据进行响应式不对方法进行处理
const countStore = useCountStore();
**
const {sum} = storeToRefs(countStore)
console.log("将解构的数据进行响应式",storeToRefs(countStore));
**
function add() {
  sum.value+=n.value
  // 第一种修改方式
  countStore.sum+=1;
  countStore.school+="学校";
  countStore.address+="地址";//时间线修改了3次
  // 第二种批量变更，时间线只修改了1次
  countStore.$patch({
    sum:888,
    school:"中德",
    address:"北京"
  })
  //  第三种
  countStore.increment(n.value);//需要配置actions，方法如下：
}

import { defineStore } from "pinia";
export const useCountStore = defineStore("count", {
  //actions里面放置的是一个一个的动作函数,用于相应组件中的“动作”
  actions: {
    increment(value: number) {
      console.log("increment被调用了", value);
      this.sum += value;
    },
  },
  // 真正存储数据的地方
  state() {
    return {
      sum: 6,
      school: "atguigu",
      address: "洪福科技园",
    };
  },
  getters: {
    bigSum(state) {
      return state.sum * 10;
    },
    // upperSchook:(state)=>{ state.school.toUpperCase()}
    upperSchook(): string {
      return this.school.toUpperCase();
    },
  },
});

3.读数据更加优雅

import { storeToRefs } from "pinia";
const countStore = useCountStore();
//storeToRefs只会关注store中的数据，不会对方法进行包裹
const {sum} = storeToRefs(countStore)

4.getters类似计算属性

  getters: {
    bigSum(state) {
      return state.sum * 10;
    },
    // upperSchook:(state)=>{ state.school.toUpperCase()}
    upperSchook(): string {
      return this.school.toUpperCase();
    },
  },

5.监听store数据中的变化

import { useCountStore } from "@/store/Love";
const loveStore = useCountStore();
loveStore.$subscribe((mutate,state)=>{
  console.log("数据变化了",state.talkList);
})

6.组合式写法

import { defineStore } from "pinia";
import { ref} from "vue";
export const useCountStore = defineStore("count", ()=>{
  // 相当于state
  let sum = ref(0);
  // 相当于action
  function increment(value: number) {
    console.log("increment被调用了", value);
    this.sum += value;
  }
  return {sum,increment}
});