江苏龙网

  1. 主页 > 生活百科 > >

Vue新的状态管理库Pinia入门教程

vue

前沿Vue官方推荐的状态管理库是Vuex，那为什么最近Pinia会火起来呢，主要在于Vue3推出来的时候，Vuex对于Vue3的组合式Api支持的不是特别好，也就是在这个时候Pinia出现了，最重要的是，Pinia不但支持Vue3，同时还支持Vue2，这就厉害了，而且最新Vuex5的特性还是参考的Pinia
 
使用教程官网：https://pinia.vuejs.org/github地址：https://github.com/vuejs/pinia【Vue新的状态管理库Pinia入门教程】 
1、安装
npm install pinia -S 
2、vue中引入
// Vue3中引入使用import { createPinia } from 'pinia'App.use(createPinia())//Vue2中引入使用import { createPinia, PiniaVuePlugin } from 'pinia'Vue.use(PiniaVuePlugin)const pinia = createPinia()new Vue({el: '#app',// 其它配置项pinia,}) 
3、基本使用
// 定义store// stores/counter.jsimport { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {// 状态值定义state: () => {return { count: 0 }},// 状态更改方法定义actions: {increment() {this.count++},},})// 在组件中使用// 导入状态import { useCounterStore } from '@/stores/counter'export default {setup() {// 初始化一个store实例const counter = useCounterStore()// state更新counter.count++// 或者调用方法更新counter.increment()},} 
4、也可以像vuex一样使用
const useCounterStore = defineStore('counter', {// 状态值state: () => ({ count: 0 }),// getter值getters: {double: (state) => state.count * 2,},// actions方法// 注意pinia里没有mutationactions: {increment() {this.count++}}})// 定义另外一个storeconst useUserStore = defineStore('user', {// ...})export default {// computed里引入使用state里的值computed: {...mapStores(useCounterStore, useUserStore)...mapState(useCounterStore, ['count', 'double']),},// methods里使用actionmethods: {...mapActions(useCounterStore, ['increment']),},} 
好了，Pinia的入门教程就讲到这，是不是语法更加简洁
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧




    推荐阅读


    上一篇：自动回复怎么设置？

    下一篇：UNIX 平台 C 程序开发心得