八、Vue3基础之八

---

一、Pinia.js

Pinia.js有如下特点：

1. 完整的ts支持
2. 足够轻量，压缩后的体积只有1kb左右
3. 去除mulations，只有state,getters,actions
4. actions支持同步和异步
5. 代码扁平化没有模块嵌套，只有store的概念，store之间可以自由使用，每一个store都是独立的
6. 无需手动添加store，store一旦创建会自动添加
7. 支持vue3和vue2

安装pinia.js

npm install pinia --save
1

引入pinia.js
main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 使用Pinia --
import { createPinia } from 'pinia'
const store = createPinia()
// 使用Pinia --
let app = createApp(App)

// 使用Pinia --
app.use(store)
// 使用Pinia --
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12

初始化仓库Store
在store下创建store-name.ts

export const enum Names { // 用来做为store的key
    TEST = 'TEST'
}
1
2
3

在store下创建index.ts

import { defineStore} from 'pinia'
import { Names } from './store-name'

export const useTestStore = defineStore(Names.TEST, {
    state: () => {  //初始、需要用到的数据都定义到这里来
        return {
            name: '张三',
            age: 14
        }
    },
    // computed修饰一些值
    getters:{

    },
    // methods 可以做同步，异步，提交state
    actions: {

    }

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

在App.vue中使用这个store

<template>

    <div>
      Pinia:{{Test.name}}--{{Test.age}}
    </div>

</template>

<script setup lang='ts'>
import { useTestStore } from './store'
const Test = useTestStore()

</script>

<style lang='scss' scoped>

</style>

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

1.1 State

state的值是允许修改的，有五种方式可以修改state的值

<template>

    <div>
      Pinia:{{Test.name}}--{{Test.age}}  <br>
      change:
      <button @click="change">change</button>
    </div>

</template>

<script setup lang='ts'>
import { useTestStore } from './store'
const Test = useTestStore()

const change = () =>{
    // Test.name = '王五'; 第一种修改的方式

    // Test.$patch({
    //   name: '赵六'
    // }) 第二种修改的方式
    
    // 第三种修改方式
    // Test.$patch((state)=>{ //这里的参数就是state
    //     state.age = 20
    // })

    // 第四种修改方式，state对象中的数据全都要改不然出错
    // Test.$state = {
    //   name: '赵六',
    //   age: 30
    // }

    // 第五种方式使用store中的actions方法来修改
    Test.setAge() 

}

</script>

<style lang='scss' scoped>

</style>

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

1.2 解构store

App.vue

<template>

    <div>
      Pinia:{{Test.name}}--{{Test.age}}  <br>
      解构出来的值{{name}}--{{age}} <br>
      change:
      <button @click="change">change</button>
    </div>

</template>

<script setup lang='ts'>
import { useTestStore } from './store'
import { storeToRefs } from 'pinia';
const Test = useTestStore()
// 解构出来不具有响应式，所以需要加上storeToRefs
const {name, age} = storeToRefs(Test)

const change = () =>{
    age.value++
    name.value= '五五'
}

</script>

<style lang='scss' scoped>

</style>

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

1.3 Actions

store下的index.ts

import { defineStore} from 'pinia'
import { Names } from './store-name'

type User = {
    name: string
    age: number
}

const result:User = {
    name: '张三',
    age: 30
}

const Login = ():Promise<User> => {
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve({
                name: "嘎子哥",
                age: 40
            })
        }, 2000)
    })
}

export const useTestStore = defineStore(Names.TEST, {
    state: () => {  //初始、需要用到的数据都定义到这里来
        return {
            user: <User>{},
            hobby: '打球'
        }
    },
    // computed修饰一些值
    getters:{
        // 有缓存
        getUerName():string{
            return `$-${this.user.name}`
        }
    },
    // methods 可以做同步，异步，提交state
    actions: {
        // 同步方法
        // setUser(){
        //     this.user = result
        // }

        // 异步方法
        async setUser(){
            const login = await Login()
            this.user = login
        }
    }

})
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
48
49
50
51
52
53

App.vue

<template>

    <div>
      pinia: {{Test.user.name}} -- {{Test.user.age}} <br>
      getter: {{Test.getUerName}}
      <button @click="change">change</button>
    </div>

</template>

<script setup lang='ts'>
import { useTestStore } from './store'
const Test = useTestStore()

const change = () =>{
    Test.setUser()
}

</script>

<style lang='scss' scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

1.3 pinia持久化

pinia和vuex页面刷新状态会丢失。
可以写一个pinia插件缓存他的值。