vite commonjs（Vite+TS项目：论如何便捷的使用pinia）
导读：这里给大家分享我在网上学习总结出来的一些知识，希望对大家有所帮助...
这里给大家分享我在网上学习总结出来的一些知识 ，希望对大家有所帮助
pinia
介绍
特性
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>
如果对您有所帮助 ，欢迎您点个关注 ，我会定时更新技术文档 ，大家一起讨论学习 ，一起进步 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！