vite及pinia

vite简介

Vite是一种全新的前端构建工具，可以把它理解为一个开箱即用的开发服务器 + 打包工具的组合，但是更轻更快。
VIte的开发服务器比 Vue CLI 快 10-100 倍
多框架支持

Vite 一开始主要注重于 Vue 的单文件组件支持，但 2.0 基于之前的经验提供了一个更稳定灵活的内部架构，从而可以完全通过插件机制来支持任意框架。

现在 Vite 提供官方的 Vue, React, Preact, Lit Element 项目模版

vite官网

安装步骤

npm create vite

Pinia简介

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。类似vueX

Pinia官网

安装

npm install pinia

使用

main.js

import {
    
     createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {
    
     createPinia } from 'pinia'
//创建pinia实例
const pinia = createPinia()
const app = createApp(App)
//挂载到vue根实例
app.use(pinia)
app.mount('#app')

store/index.ts

import {
    
     defineStore } from 'pinia'
//定义容器
//参数1:容器的id,必须唯一,将来pinia会把所有的容器挂载到根容器
//参数2:选项对象
export const useMainStore = defineStore('main', {
    
    
    /* 
    *类似组件的data,用来存储全局状态
    *1.必须是函数:这是为了在服务端渲染的时候避免交叉请求导致的数据污染
    *2.必须是箭头函数,这是为了更好的TS类型推导
    */
    state: () => {
    
    
        return {
    
    
            count: 100
        }
    },
    /* 类似组件的computed,用来封装计算属性,有缓存的功能 */
    getters: {
    
    },
    /* 类似组件的methods,封装业务逻辑,修改state */
    actions: {
    
    }
})

<template>
<div>
  展示{
    
    {
    
      mainStore.count}}
</div>
</template>
<script lang="ts" setup>
import {
    
    useMainStore} from "../store/index"
const mainStore=useMainStore()
console.log("值",mainStore.count);
</script>

上面例子可能会想到解构,在展示
注意:是有问题的,因为这样拿到的数据不是响应式的,是一次性的

const {
    
    count}=mainStore 不要这样写

修改数据

<button @click="handleChangeState">修改数据</button>
================================================================
方式一:最简单的方式
const handleChangeState = () => {
    
    
  mainStore.count++;
  mainStore.foo = "hello";
  mainStore.arr = mainStore.arr.reverse();
};
方式二:如果需要修改多个数据,建议使用.$patch批量更新
const handleChangeState = () => {
    
    
  mainStore.$patch({
    
    
    count: mainStore.count++,
    foo: "hello",
    arr: mainStore.arr.reverse(),
  });
};
方式三:.$patch一个函数批量,批量更新
const handleChangeState = () => {
    
    
 mainStore.$patch((state) => {
    
    
    state.count++,
     (state.foo = "hello"), 
     state.arr.reverse();
  });
};
方式4:(1)逻辑比较多的时候可以封装到actions处理
const handleChangeState = () => {
    
    
 mainStore.changeState(2);
};

方式4:(2)
actions: {
    
    
        changeState(num: number) {
    
    
         console.log("值", num);
            this.count++
            this.foo = "hello"
            this.arr.reverse()
            //$patch一个函数批量
            this.$patch(state => {
    
    
                  state.count += num,
                    state.foo = "hello",
                    state.arr.reverse()
            })
        }
    }

getters使用

HelloWorld.vue

<template>
    <div>
    {
   
   { mainStore.count10 }}
    {
   
   { mainStore.count10 }}
    {
   
   { mainStore.count10 }}
    </div>
</template>

store / index.ts

   
 getters: {
    
    
     //函数接受一个可选参数:state状态对象
        count10(state) {
    
    
            console.log('count10 调用了');
            return state.count + 10
        }
         //如果在getters中使用了this则必须手动指定返回值类型,否则类型推导不出来
        count10(): number {
    
    
            console.log('count10 调用了');
            return this.count + 10
        }
    },

验证了,类似组件的computed,用来封装计算属性,有缓存的功能