🍍Pinia

官方文档已更新中文文档 Pinia官方文档

pinia比vuex有更好的类型提示，即使不使用TS也能够实现属性，方法的自动补全

pinia同时支持Vue2与Vue3

引入Pinia

🍍安装

pnpm i pinia

🍍导入

main.js

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

const pinia = createPinia()

const app = createApp(App)
app.use(pinia)
   .mount('#app')

创建store

🌿申明store

src /stores /userStore.js

import { defineStore } from 'pinia'

export const useUserStore = defineStore({   // 调用store定义函数
    id = 'user',                            // id必选且唯一
    state: () => {};                        // 返回一个对象(其属性即全局变量)
    getters: {};                            // 一个读取计算属性的方法集
    actions: {};                            // 一个store的方法,用于处理状态变更
})

// 亦可简写id
export const useStore = defineStore('user', {
    state: () => {};
    getters: {};
    actions: {};
})

🌿setup式

• 使用ref(),reactive()定义state 属性
• 使用computed()定义getters
• 在defineStore内使用自身的computed, ref属性均要加.value
• 外部使用无需.value(整个store会包一层reactive)
• 使用function()定义actions
• 同setup需要将使用所需的方法，属性return

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', () => {
  const name = ref('Jonathan')
  const age = ref(20)
  
  
})

State

🥬定义state

state是一个返回一个存有全局状态变量的对象的函数

export const useStore = defineStore('main', {
	state: () => {
    return {
      title: 'Pinia🍍',
      date: '2022/1/23 下午1:35:22'
    }
  }
});

🥬获取state

📌获取整个store对象

<script setup>
  import { useStore } from 'xxx/index.js'
  const store = useStore()
  console.log(store.title)               // >Pinia🍍
</script>

<template>
	<h1>
    {{ store.title }}
  </h1>
</template>

📌获取静态属性

请注意，store 是一个用 reactive 包装的对象，这意味着不需要在 getters 后面写 .value，就像 setup 中的 props 一样，如果你写了，我们也不能解构它：

<script setup>
  import { useStore } from 'xxx/index.js'
  const { title } = useStore()
  /* 
  * 该获取方法title更改后不会更新,相当于一个常量
  * 常量名必须与`state`命名相同
  */
</script>

<template>
	<h1>
    {{ title }}
  </h1>
</template>

📌获取动态属性

<script setup>
  import { useStore } from 'xxx/index.js'
  import { storeToRefs } from 'pinia'
  
  const { title } = storeToRefs(useStore())
  /* 
  * 使用`const { title } = toRefs(useStore())`有相同功能,但不推荐
  * title为响应式数据
  */
</script>

<template>
	<h1>
    {{ title }}
  </h1>
</template>

🥬更新state状态

📌直接修改

<script setup>
  import { useStore } from 'xxx/index.js'
  
  const store = useStore()
  store.title = 'Hello Pinia!'
</script>

📌使用$patch

<script setup>
  import { useStore } from 'xxx/index.js'
  
  const store = useStore()
  store.$patch({
    title: 'Hello Pinia!',
    nums: [0, 1, 2, 3]          // 更新数组需将整个数组(对象)输入
  })
  
  store.$patch((state) => {     // 回调`state`参数即`store`内的`state`
    state.nums[0]++             // 使用回调可优化数组状态更改
  })
</script>

📌调用Action

推荐使用actions的方法来更改状态值

🥬重置state

组件内调用$reset()方法可使状态回归至初态

<script setup>
  import { useStore } from 'xxx/index.js'
  const store = useStore()
  store.title = '?>-=+.@1#'
  store.$reset()
</script>

Getter

getter类似计算属性,用于返回一些计算后取得的值,有缓存功能

🍉调用自身store

import { defineStore } from 'pinia'

export const useStore = defineStore('foo', {
    state: () => ({ value: 3 }),
    getters: {                        // 第一个参数为state
        doubleValue: (state) => 2 * state.value,
        trebleValue() {               // 可以使用this
            return 3 * this.value
        },
        fivefoldValue: {              // 可以调用其他Getter
            return doubleValue(state) + trebleValue(state)
        }
    }
})

🍉调用其他store

import { defineStore } from 'pinia'
import { useStore2 } from 'url'

export const useStore = defineStore('bar', {
    state: () => ({ value: 1 }),
    getters: {
        add() {
            const state2 = store2()    // 与setup中调用一样
            return this.value + state2.value
        }
    }
})

action

与Getter相似

🥒调用自身store

import { defineStore } from 'pinia'

export const useStore = defineStore('foo', () => {
    state: () => ({ value: 3 }),
    actions: {                        // 第一个参数为state
        doubleValue: (state) => 2 * state.value,
        trebleValue() {               // 可以使用this
            return 3 * this.value
        },
        fivefoldValue: {              // 可以调用其他Getter
            return doubleValue(state) + trebleValue(state)
        }
    }
})

🥒调用其他store

import { defineStore } from 'pinia'
import { store2 } from 'url'

export const useStore = defineStore('bar', () => {
    state: () => ({ value: 1 }),
    actions: {
        add() {
            const state2 = store2()       // 与setup中调用一样
            return this.value + state2.value
        }
    }
})

工程化

数据持久化

🍐安装插件

pnpm i pinia-plugin-persist

🍐挂载插件

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia().use(piniaPluginPersist))
  .mount('#app')

🍐开启缓存

export const useStore = defineStore('main', {
  // ...
  persist: {
    enable: true,
    
  }
})

参考文档:

《Pinia (vuejs.org)》