Pinia 实战入门

1、Pinia是什么呢?

Pinia 是一个用于 Vue 的状态管理库,可以说是Vuex的替代品, 尤大神强势推荐

官方地址:Home | Pinia (vuejs.org)

2、优势在哪里?

  • Vue2 和 Vue3 都支持
  • 更小,只有1KB
  • 不需要嵌套模块,符合Vue3的Composition api,让代码更加扁平化
  • 抛弃了Mutations的操作,只有state、getters和actions.极大简化了状态管理库的使用
  • 完整的TypeScript支持
  • 代码更加简洁,可以实现很好的代码自动分割

3、安装

# 使用yarn
yarn add pinia
# 使用npm
npm install pinia

4、使用

创建Pinia(根存储)并将其传递到应用程序

还记得Vuex在使用时一般采用modules方式,这就需要在store/index.ts中将所有的modules通过creaeStore注册到store中,那么Pinia就省去了这些麻烦,createPinia()即可,不需要注册modules,没有任何参数,所以连store/index.ts都可以不用了,直接在main.ts中添加即可, 这一点会比Vuex简洁很多

import { createPinia } from 'pinia'
app.use(createPinia());
# main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())

app.mount('#app')

定义Store

定义store的函数式defineStore,这就很有Vue3的风格, 还需要一个唯一的store id,定义Store有以下两种方式:

1、选项式定义

# src/stores/counter.ts

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 10
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

2、函数式定义 类似于component setup()方式,这种方式更符合Vue3,个人比较喜欢这种定义方式

# src/stores/counter.ts

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(10)
  const increment = () => {
    count.value++
  }
  return { count, increment }
})

至于Getters, 在Pinia如同computed一样,所有是否需要完全取决于项目的需要

使用Store

这里需要用到storeToRefs提取属性,来保持属性的响应性

# src/components/HelloWorld.vue

<template>
  <div>count = {{ count }}</div>
  <button @click="onClick">Increment</button>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useCounterStore } from '@/stores/counter'

const counterStore = useCounterStore()
const { count } = storeToRefs(counterStore)

const onClick = () => {
  counterStore.increment()
}
</script>

5、总结

Pinia要比Vuex简洁很多,也更容易理解,这也正是Pinia设计的初衷,更符合直觉,个人觉得函数式的定义Store特别好,再也不需要记录那些state,getter,actions了,开发者可以更专注于业务逻辑的开放,Pinia还有很多的用户和细节,请转官方文档[Home | Pinia (vuejs.org)](

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3是一种流行的JavaScript框架,用于构建用户界面。Vue Router是Vue.js的官方路由器,用于实现单页面应用程序的导航功能。Vite是一个快速的Web开发构建工具,具有即时重载和快速的开发体验。Pinia是一个简单、快速、类型安全的状态管理库。 使用Vue3、Vue Router、Vite和Pinia进行组件化开发实战入门非常简单。 首先,我们需要安装Vue3和相关的库。可以使用npm或yarn来安装它们。在项目的根目录中运行以下命令: ``` npm install vue@next vue-router@next @pinia/vue@next vite --save ``` 安装完成后,我们可以开始创建一个Vue应用程序。在项目的根目录中创建一个`src`文件夹,并在其中创建一个`main.js`文件。在`main.js`文件中,我们需要导入VueVue Router和Pinia,并创建一个Vue实例。代码示例如下: ```javascript // main.js import { createApp } from 'vue'; import { createRouter, createWebHistory } from 'vue-router'; import { createPinia } from 'pinia'; // 导入组件 import App from './App.vue'; // 创建路由 const router = createRouter({ history: createWebHistory(), routes: [ // 定义路由 { path: '/', component: Home } ] }); // 创建 Pinia 实例 const pinia = createPinia(); // 创建 Vue 实例 const app = createApp(App); // 使用路由和 Pinia app.use(router); app.use(pinia); // 挂载应用 app.mount('#app'); ``` 现在,我们可以创建一个简单的Vue组件。在`src`文件夹中创建一个名为`App.vue`的文件,并在其中定义一个组件。在组件中,我们可以使用Pinia来管理组件的状态,使用Vue Router来处理导航。 ```html <!-- App.vue --> <template> <div> <router-view></router-view> <button @click="increment">增加计数器</button> <p>{{ count }}</p> </div> </template> <script> import { defineComponent } from 'vue'; import { useCounter } from '../store'; export default defineComponent({ setup() { const counter = useCounter(); const increment = () => { counter.increment(); }; return { count: counter.count, increment }; } }); </script> ``` 在上述示例中,我们创建了一个Counter组件,其中包含一个用于增加计数器的按钮和一个显示计数器值的段落。我们使用Pinia的`useCounter`钩子来访问和修改计数器的状态。 最后,在项目的根目录中运行以下命令启动应用程序: ``` npm run dev ``` 以上就是使用Vue3、Vue Router、Vite和Pinia进行组件化开发实战入门的一个简单示例。通过深入学习这些工具和框架,您将能够构建更复杂、功能丰富的应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值