Pinia的使用

Pinia

Pinia（发音为/piːnjʌ/，如英语中的“peenya”）是最接近piña（西班牙语中的菠萝）的词；

Pinia本质上依然是一个状态管理的库，用于跨组件、页面进行状态共享（这点和Vuex、Redux一样）；

官网：Home | Pinia (vuejs.org)

一、基本认识

1.安装

npm install pinia

2.基本使用

• 创建一个pinia

import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia
1
2
3
4
5

• 注册

import pinia from './store'

createApp(App).use(pinia).mount('#app')
1
2
3

3.认识Store

Store的三个核心：state、getters、actions；

等同于组件的data、computed、methods；

一旦 store 被实例化，你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性；

1.定义Store

在创建的pinia文件夹中新建一个js文件，如counter.js(一个js文件为一个Store)；

Store使用**defineStore()**定义：它有两个参数，第一个参数为唯一名称，第二个参数为一个对象，包含state，getters等。

// 定义一个关于counter的store
import { defineStore } from 'pinia'

const useCounter = defineStore('counter', {
  state: () => ({
    count: 100
  }),
  getters: {},
  actions: {}
})

export default useCounter
1
2
3
4
5
6
7
8
9
10
11
12

2.使用定义的Store

通过调用use函数来使用Store：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

二、state

• 读取和写入 state：默认情况下，您可以通过 store 实例访问状态来直接读取和写入状态；
• 重置 State： 可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值；
• 改变State：除了直接用 store.counter++ 修改 store，还可以调用 $patch 方法；它允许使用部分“state”对象同时应用多个更改；
• 替换State：可以通过将其 $state 属性设置为新对象来替换 Store 的整个状态：

user.js：

import { defineStore } from "pinia";

const useUser = defineStore("user", {
  state: () => ({
    name: 'tjx',
    age: 18,
    level: 100
  })
})

export default useUser

1
2
3
4
5
6
7
8
9
10
11
12

使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

三、getters

Getters相当于Store的计算属性：它们可以用 defineStore() 中的 getters 属性定义； getters中可以定义接受一个state作为参数的函数；

counter.js：

// 定义一个关于counter的store
import { defineStore } from 'pinia'
import useUser from './user'

const useCounter = defineStore('counter', {
  state: () => ({
    count: 100,
    friends: [
      { id: 111, name: 'yn'},
      { id: 222, name: 'tjx'},
      { id: 333, name: 'lo'},
    ]
  }),
  getters: {
    // 1.基本使用
    doubleCount(state) {
      return state.count * 2
    },
    // 2.一个getter引入另一个getter
    doubleCountAddOne() {
      // this为store实例
      // return this.doubleCount + 1
    },
    // 3.getters也支持返回一个函数
    getFridenById(state) {
      return function(id) {
        for (let i = 0; i<state.friends.length;i++) {
          const friend = state.friends[i]
          if (friend.id === id) {
            return friend
          }
        }
      }
    },
    // 4.getter用到了别的store中的数据
    showMessage(state) {
      // 1.获取user信息
      const userStore = useUser()
      // 2.获取自己信息
      // 3.拼接信息
      return `name: ${userStore.name}-count:${state.count}`
    }
  },
  actions: {}
})

export default useCounter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

四、actions

Actions 相当于组件中的 methods。可以使用 defineStore() 中的 actions 属性定义，并且它们非常适合定义业务逻辑；

和getters一样，在action中可以通过this访问整个store实例的所有操作;

home.js：

import {defineStore} from 'pinia'

const useHome = defineStore('home', {
  state:() => ({
    banners: [],
    recommends: []
  }),
  actions: {
    async fetchHomeMultidata() {
      const res = await fetch('http://123.207.32.32:8000/home/multidata')
      const data = await res.json()
      this.banners = data.data.banner.list
      this.recommends = data.data.recommends.list
      return undefined
    }
  }
})

export default useHome
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

counter.js：

// 定义一个关于counter的store
import { defineStore } from 'pinia'

const useCounter = defineStore('counter', {
  state: () => ({
    count: 100
  }),
  getters: {},
  actions: {
    increment() {
      // 通过this访问，不会传入state
      this.count++
    },
    incrementNum(num) {
      this.count += num
    }
  }
})

export default useCounter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25