pinia是什么及它的使用
pinia是一个用于vue的状态管理库,类似于vuex,是vue的另一种状态管理工具与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的规范,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持。或3.在main.js中进行注册......
·
pinia是什么?
pinia是一个用于vue的状态管理库,类似于vuex,是vue的另一种状态管理工具
与vuex相比
与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的规范,提供了 Composition-API 风格的 API,最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持。
- mutations 不再存在。
- 无需创建自定义复杂包装器来支持 TypeScript,所有内容都是类型化的,并且 API 的设计方式尽可能利用 TS 类型推断。
- 不再需要注入、导入函数、调用函数、享受自动完成功能!
- 无需动态添加 Store,默认情况下它们都是动态的
- 不再有 modules 的嵌套结构
安装(仅限于vue3)
- 通过你喜欢的包管理器安装
npm install pinia
或
yarn add pinia
使用
- 在src目录下新建一个stroe文件夹,在文件夹中新建一个index.ts
- 通过import将下载好的pinia引入到index.ts中并导出
import { createPinia, defineStore } from 'pinia' export const Pinia = createPinia() export default defineStore('admin', { //这里的state与vue2中用来存放初始化变量的data的写法相似,需要return state: () => { return { count: 100, } }, getters: { count: state => state.count }, //Actions 相当于组件中的 methods。 它们可以使用 defineStore() 中的 actions 属性定义,并且它们非常适合定义业务逻辑: actions: { } }, })
3.在main.js中进行注册
import { createApp } from 'vue'
import App from './App.vue'
import { Pinia } from './store/index'
const app = createApp(App)
app.use(Pinia)
app.mount('#app')
(注:要想了解更多请看官网:介绍 | Pinia 中文文档)
更多推荐
已为社区贡献1条内容
所有评论(0)