Vite+TS項目：論如何便捷的使用pinia

這裡給大家分享我在網上學習總結出來的一些知識，希望對大家有所幫助

pinia

介紹

vue新一代狀態管理庫，相當於vuex

特性

1.像定義components一樣定義store

2.支持ts

3.去除mutations，只有state，getters，actions（支持同步非同步）

4.輕量級（1kb）

5.vuex是要有主入口進行統一導入，pinia可以分模塊導入

pina簡單使用

1.導入path

項目全局安裝  @type/node

npm install @types/node --save-dev

2.config設置@指標

 3.tsconfig.json設置@指標

4.導入pinia

項目全局安裝  pinia

npm install pinia --save-dev

5.全局導入pinia

 6.store內容設置案例

 內容：

import { defineStore } from 'pinia'
export default defineStore('myGlobalState', {
    state: () => {
        return {
            count: 1,
            message: 'Hello world',
            phone: 13811111199
        }
    },
    actions:{
        countAdd(){
            this.count++
        }
    },
    getters:{
        countSum(state){
            return state.count*2
        }
    }
})

 7.demo調用方法展示

<script setup lang="ts">
import useCommonStore from '@/store/index'
import {storeToRefs} from "pinia";
const store = useCommonStore()
const data = storeToRefs(store)
// 常規方法修改內容
const storeAdd = ()=>{
  data.count.value++
}
// $patch修改內容
const storeAddOne = ()=>{
  store.$patch({
    count:store.count+1
  })
}
// $patch修改內容，內帶對象
const storeAddTwo = ()=>{
  store.$patch((state)=>{
    state.count++
  })
}
// $state修改整體內容
const storeRest = ()=>{
  store.$state = {
    count: 1,
    message: 'Hello world',
    phone: 13811111199
  }
}
// $reset重置為初始內容
const storeRestOne = ()=>{
  store.$reset()
}
// $subscribe監聽整個倉庫變化
store.$subscribe((mutation,store)=>{
  console.log("mutation",mutation)
  console.log("store",store)
})
</script>

<template>
  <div class="box">
    <h2>
      {{store.count}}
      getters獲取值{{store.countSum}}
      <el-button @click="storeAdd" type="primary">添加一</el-button>
      <el-button @click="storeAddOne" type="primary">添加二</el-button>
      <el-button @click="storeAddTwo" type="primary">添加三</el-button>
      <el-button @click="storeRest" type="primary">重置一</el-button>
      <el-button @click="storeRestOne" type="primary">重置二</el-button>
      <el-button @click="store.countAdd" type="primary">actions調用</el-button>
    </h2>
  </div>
</template>

<style scoped lang="stylus">
.box
  text-align center
  line-height 150px
</style>

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。