[JavaScript知识库]小菠萝Pinia

Pinia 是 vue 官方成员在2019年11月重新设计的一个状态存储库，它允许你跨组件/页面共享状态，并且是响应式的，类似于 vuex。

官网：Pinia

通俗的讲 ：
① vuex精简版 ，而且vue官方更加推荐使用。
②优势又完胜于vuex?，下面我们来了解下pinia。

Pinia和vuex的区别：
①没有mutation,只有state，getters，action【同步、异步】用来修改state数据
②默认也是存入内存，如需要使用本地存储，会比vuex麻烦
③语法上比vuex灵活
④pinia没有modules配置，没独立仓库，是definStore生成出来的
⑤state是一个对象返回一个对象和组件的data是一样的语法

1.安装引入Pinia

安装：
npm install pinia

2.使用：在main.js里加入

import {createApp} from 'vue'
import App from './App.vue'  //把pinia挂载到vue根实例

import { createPinia, PiniaVuePlugin } from 'pinia';  //导入pinia
const pinia = createPinia()  //创建Pinia实例
const app = createApp(App)
app.use(pinia) //挂载到vue根实例
app.mount('#app')

3.创建 pinia 仓库 ?store-->pinia.js

import { defineStore } from 'pinia'; //引入实例：将Store连接到devtools，并返回函数

export const useMainStore = defineStore('容器名',{
    state:()=>{//vue2里的data
        return{
            count:100,
            foo:'嘻嘻嘻',
            arr:[1,2,3]
        }
    },
    getters:{//类似computed
       //getters访问data里的数据:state状态对象
        cont10(state){
            return state.count + 10
        }
       //getters访问getters里的数据:
       //方式一
        cont10():number{
            return this.count + 10
        }
       //方式二
       cont11(){
            return this.cont10 + 1 
       }
    },
    actions:{//类似methods
        changeState(num:number){
            this.count+=num
            this.foo = 'hello'
            this.arr.push(4)
            //操作数组建议用
            this.$patch(state=>{
                this.arr.push(4)
            })
        }
    },
})


通过调用store上的方法将状态重置为其初始值：$reset()
const store = useStore()
useMainStore.$reset()

4.页面中使用

使用state

import {useMainStore} from './store/index.js'
const mainStore = useMainStore()
视图里：
<span>{{useMainStore.count}}</span>

使用getters

import { mapStores } from 'pinia'
import useUserStore from './user'
computed: {
    ...mapStores(useUserStore),
}


传参：
setup() {
    const store = useStore()
    return { getUserById: store.getUserById }
}
<template>
  <p>User 2: {{ getUserById(2) }}</p>
</template>

使用actions

可以异步

actions: {
    increment() {
      this.counter++
    },
}

5.修改state

数据多的话直接解构
import {count,foo} = mainStore
但是这样子解构的是无法第二次操作数据的
解决办法：
import {storeToRefs} from 'pinia'
import {count,foo} = storeToRefs(mainStore)
//数据的修改：
方式一：
const handleChange = () =>{
    mainStore.count++
}
方式二：$patch 批量修改，建议使用这个，不是写法简便，是他们内部优化
mainStore.$patch({
    count:mainStore.count++,
    foo:'hello'
})
方式三:
import { mapWritableState } from 'pinia'
computed: {
    ...mapWritableState(useCounterStore, ['counter'])
    ...mapWritableState(useCounterStore, {
      myOwnName: 'counter',
    }),
},
方式四：使用actions

6.监视他监视他监视他监视他的变化

$subscribe在插件内部调用

pinia.use({store}=>{
   store.$subscribe(() => {
    // react to store changes
  })
  store.$onAction(() => {
    // react to store actions
  })
})



使用：
export default {
  setup() {
    const someStore = useSomeStore()
    someStore.$subscribe(callback, { detached: true })
    ...
  },
}


查看实例上的整个状态
watch(
  pinia.state,
  (state) => {
    localStorage.setItem('piniaState', JSON.stringify(state))
  },
  { deep: true }
)

mapStores()、mapState()、mapActions()、Setup Store/Store


还有几个api没有去细看，你们自己去找吧，爸爸写累了，改天再阿巴阿巴阿巴

呼~撒花??ヽ(°▽°)ノ?

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系