Vite+TS项目:论如何便捷的使用pinia

这里给大家分享我在网上学习总结出来的一些知识,希望对大家有所帮助

Vite+TS项目:论如何便捷的使用pinia_第1张图片

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设置@指标

Vite+TS项目:论如何便捷的使用pinia_第2张图片

 3.tsconfig.json设置@指标

Vite+TS项目:论如何便捷的使用pinia_第3张图片

4.导入pinia
项目全局安装  pinia

npm install pinia --save-dev
5.全局导入pinia

Vite+TS项目:论如何便捷的使用pinia_第4张图片

 6.store内容设置案例

Vite+TS项目:论如何便捷的使用pinia_第5张图片

 内容:

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调用方法展示





如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

Vite+TS项目:论如何便捷的使用pinia_第6张图片

你可能感兴趣的:(vue.js,javascript,前端,ecmascript,前端框架)