1.Paina

简介

paina就是Vuex的更新版本，特点是

1. 只有state,action,getter;

没有module和mutation

2.使用方法

第一步：在main中注册挂载

main中
import { createPinia } from 'pinia'

app.use(Icon)
app.use(Directive)
app.use(createPinia())
app.mount('#app')

第二步：store中

import { defineStore } from 'pinia'

export const UserTestStore = defineStore('test', {
  state: () => {
    return {
      num: 0,
      name: '张三'
    }
  },
  actions: {
    upNum(val:number) {
      // 可以写同步异步方法
      // 最深去还不需要解构，可以直接store.upNum直接使用
      this.num += val
    }
  },
  getters: {
    changeNum(num) {
      // 这里测试有缓存，不会重复打印，只打印一次getter
      console.log('getter')
      return this.num + 1000
    }
  }

})

第三步：使用数据，方法，和计算

    <h1>A组件</h1>
    {{ num }}
    {{ name }}
    <button @click="changeName">修改名称</button>
    <button @click='btn'>修改+=数字</button>

import { storeToRefs } from 'pinia'
import { UserTestStore } from '@/store'
//解构拿到数据和计算属性，方法可以直接拿
const { name, num, changeNum} = storeToRefs(store)

修改数据和批量修改
const changeName = () => {
  // name.value = '李四'
  // num.value = 10

  // 批量更新
  store.$patch(state => {
    state.num++
    state.name = '炸雷'
  })
}

可以直接调用方法
const btn = () => {
  store.upNum(200)
}

计算属性
      {{changeNum}}
      {{changeNum}}
      {{changeNum}}
      {{changeNum}}
      {{changeNum}}

第四步，重置的API,打印store可以看见

<button @click='reset' >刷新重置API</button>
const reset = () => {
  store.$reset()
}

3.划分模块

4.持久化储存，利用插件

1.安包

npm i pinia-plugin-persist -S

2.main.js中

import { createPinia } from 'pinia'

// 引入插件pinia的持久化储存插件
import piniaPluginPersist from 'pinia-plugin-persist'

const store = createPinia()
// 使用插件
store.use(piniaPluginPersist)

const app = createApp(App)
app.use(store)

3.test.js模块中配置

  persist: {//配置插件
    enabled: true,//开启持久化储存
    strategies: [{
      key: 'gushihua_user',//储存的key值
      storage: localStorage,//默认会话储存，需要专门开启本地储存
      paths: ['num']//设置那些数据需要持久化储存，没设置的就不储存

    }]
  }

2.TS

简介

TS就是强类型语言，在Vue3和React中使用比较多，可以声明一个类型。比较常用的基础知识就是：接口，泛型等

1.abstract开头的类是抽象类

定义一个抽象方法
抽象方法使用 abstract开头，没有方法体
抽象方法只能定义在抽象类中，子类必须对抽象方法进行重写

 abstract class Animal {
        name: string;
        constructor(name: string) {this.name = name;}
        abstract sayHello():void;
    }
//继承
 class Dog extends Animal{
     sayHello() {
         console.log('汪汪汪汪！');
 }}
 //调用
    const dog = new Dog('旺财');
    dog.sayHello();

2.接口

3.泛型

4.属性修饰符

public 修饰的属性可以在任意位置访问（修改）默认值
private 私有属性，私有属性只能在类内部进行访问（修改），通过在类中添加方法使得私有属性可以被外部访问
protected 受包含的属性，只能在当前类和当前类的子类中访问（修改）

 class Person {
        private _name: string;
        private _age: number;
        constructor(name: string, age: number) {
            this._name = name
            this._age = age
        }
 const per = new Person("孙悟空", 12)
 
 per.name = "猪八戒";
 per.age = 345
 console.log(per);

3.vite

1.配置代理

1.vite.config中配置代理

2.在unitl.js中封装axios

// 相当于挂载了一个请求拦截器和响应拦截器
import axios from 'axios'

const service = axios.create()

service.interceptors.request.use(config => {
  return config
}, error => {
  Promise.reject(error)
})

service.interceptors.response.use(response => {
  return response.data
}, error => {
  return Promise.reject(error)
})

export default service

3.在api文件夹中把请求封装进函数

4.然后可以直接引入api文件，解构函数直接使用了

import { ref, onBeforeMount } from 'vue'
import { getSilders } from '../../api/test'

// 测试请求
// let list = ref([])
onBeforeMount(() => {
  getSilders().then(res => {
    console.log(res.data.list)
  })
})

记录：被一个小错误卡了20分钟，忘了改了vue.config配置文件需要重启才会生效了哈哈

Pinia-TS-Vite