2.pinia基本使用

1.首先先安装依赖

1

npm install pinia

2.在main.js中引入pinia并创建容器挂载到根实例上

1

2

3

4

//引入stores暴露出的pinia的实例

import pinia from './stores'

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

3.创建stores文件夹和index.js文件(这个文件以后基本不用管了)

1

2

3

import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

4.在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。(类似vuex的模块化)

defineStore 是需要传参数的,

  • 第一个参数是id,就是一个唯一的值,简单点说就可以理解成是一个命名空间.
  • 第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,第二个是 getters,第三个是 actions。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

//定义关于counter的store

import {defineStore} from 'pinia'

/*defineStore 是需要传参数的,其中第一个参数是id,就是一个唯一的值,

简单点说就可以理解成是一个命名空间.

第二个参数就是一个对象,里面有三个模块需要处理,第一个是 state,

第二个是 getters,第三个是 actions。

*/

const useCounter = defineStore("counter",{

    state:() => ({

        count:66,

    }),

     

    getters: {

    },

    actions: {

    }

})

//暴露这个useCounter模块

export default useCounter

注意:返回的函数统一使用useXXX作为命名方案,这是约定的规矩。例如上面的useCounter

5.然后再组件中使用:

1

2

3

4

5

6

7

8

9

10

11

12

13

<template>

    <!-- 在页面中直接使用就可以了 不用 .state-->

  <div>展示pinia的counter的count值:{{counterStore.count}}</div>

</template>

<script setup>

// 首先需要引入一下我们刚刚创建的store

import useCounter from '../stores/counter'

// 因为是个方法,所以我们得调用一下

const counterStore = useCounter()

</script>

注意:在模板使用 ,不用和vuex一样还要.state,直接点state里面的K

运行效果: 可以用vue3的调试工具看pinia

2.1注意Store获取到后不能解构,否则失去响应式

案例需求,点击按钮加一:

一个不解构,一个不解构看看区别。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<template>

  <div>展示pinia的counter的count值:{{counterStore.count}}</div>

  <div>展示解构出来的pinia的counter的count值:{{count}}</div>

  <button @click="addCount">count+1</button>

</template>

<script setup>

    import useCounter from '../stores/counter'

     

    const counterStore = useCounter()

     

    const {count} = counterStore

     

    function addCount(){

      //这里可以直接操作count,这就是pinia好处,在vuex还要commit在mutaitions修改数据

      counterStore.count++

    }

<script/>

在 vuex 里面是坚决不允许这样子直接操作 state 数据的,pinia是可以的,看看上面的addCount函数直接操作。

运行结果:

解决方案:

pinia提供了一个函数storeToRefs解决。引用官方API storeToRef 作用就是把结构的数据使用ref做代理

1

2

3

import {storeToRefs} from 'pinia'

const counterStore = useCounter()

const {count} = storeToRefs(counterStore)

现在数据都是响应式的了

3.修改state的数据

重新新建一个user模块

stores/user.js

1

2

3

4

5

6

7

8

9

10

11

//定义一个关于user的store

import {defineStore} from 'pinia'

const useUser = defineStore("user",{

    state:()=>({

        name:"紫陌",

        age:18

    })

})

export default useUser

组件中修改数据:

**第一种方法:**点击按钮修改数据,这种方法是最直接的修改数据

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<template>

    <div>

        <h2>名字是:{{name}}</h2>

        <h2>年龄是:{{age}}</h2>

        <button @click="updateStore">修改Store数据</button>

    </div>

</template>

<script setup>

import useUser from '../stores/user'

import {storeToRefs} from 'pinia'

const userStore = useUser()

const {name,age} = storeToRefs(userStore)

function updateStore(){

    //一个个的修改状态

    userStore.name = "zimo"

    userStore.age = 20

}

效果:点击也修改了

第二种方法:$patch函数修改

1

2

3

4

5

6

7

8

9

10

11

function updateStore(){

    //一个个的修改状态

    // userStore.name = "zimo"

    // userStore.age = 20

    // 一次性修改多个状态

    userStore.$patch({

        name:"zimo",

        age:20

    })

}

这个方式也可以,效果一样。

第三种方法:$state 方式(这个是替换的方式。)这个基本不用,这里就不多说。可以看查阅文档。

第四种方法:$reset()函数是重置state数据的

新增一个重置按钮:

1

2

3

function resetStore(){

    userStore.$reset()

}

运行结果:点击了修改数据按钮之后在点重置按钮就恢复原始的数据。

4.getters的使用

getters 类似于 vue 里面的计算属性,可以对已有的数据进行修饰。不管调用多少次,getters中的函数只会执行一次,且都会缓存。

1.最基本的使用

在counter模块演示了,counter模块:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

//定义关于counter的store

import {defineStore} from 'pinia'

const useCounter = defineStore("counter",{

    state:() => ({

        count:66,

    }),

    getters:{

        //基本使用

        doubleCount(state) {

            return state.count * 2

        },

    },

})

//暴露这个useCounter模块

export default useCounter

组件中:

1

2

3

4

<div>

      <h1>getters的使用</h1>

      <h2>doubleCount:{{counterStore.doubleCount}}</h2>

  </div>

运行效果:

这样就是最基本的使用了。

2.一个getter引入另外一个getter

couter模块:

1

2

3

4

5

6

7

8

9

10

11

12

getters:{

        //基本使用

        doubleCount(state) {

            return state.count * 2

        },

        //一个getter引入另外一个getter

        doubleCountAddTwo(){

            console.log(this);

            //this.是store实例

            return this.doubleCount + 2

        }

    },

组件中使用:

1

2

3

4

5

<div>

        <h1>getters的使用</h1>

        <h2>doubleCount:{{counterStore.doubleCount}}</h2>

        <h2>doubleCountAddTwo:{{counterStore.doubleCountAddTwo}}</h2>

    </div>

运行效果并且看看打印的this:

3.getters中用别的store中的数据

在counter模块中拿user模块的store数据。

count模块:

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

//定义关于counter的store

import {defineStore} from 'pinia'

import useUser from "./user"

const useCounter = defineStore("counter",{

    state:() => ({

        count:66,

    }),

    getters:{

        //基本使用

        doubleCount(state) {

            return state.count * 2

        },

        //一个getter引入另外一个getter

        doubleCountAddTwo(){

            console.log(this);

            //this.是store实例

            return this.doubleCount + 2

        },

        //getters中用别的store中的数据

        showMessage(state){

            console.log(state);

            console.log(this)

            //获取user信息,拿到useUser模块

            const userStore = useUser()

            //拼接信息

            return `name:${userStore.name}--count:${state.count}`

        }

    },

})

//暴露这个useCounter模块

export default useCounter

注意:要引入user模块

组件中:

1

2

3

4

5

6

<div>

       <h1>getters的使用</h1>

       <h2>doubleCount:{{counterStore.doubleCount}}</h2>

       <h2>doubleCountAddTwo:{{counterStore.doubleCountAddTwo}}</h2>

       <h2>showMessage:{{counterStore.showMessage}}</h2>

   </div>

运行结果:

注意:我打印了this和store,他们都是当前这这个模块的实例

这样就在counter模块拿到了user模块的数据了。

5. actions的使用

actions 是可以处理同步,也可以处理异步,同步的话相对来说简单一点.actions类似methods

1.先看同步使用

counter模块使用:

在actions定义了两个函数一个加一的函数,一个加20的函数。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

//定义关于counter的store

import {defineStore} from 'pinia'

const useCounter = defineStore("counter",{

    state:() => ({

        count:66,

    }),

    actions:{

        increment(state){

            //actions没有state,只能通过this拿store,这里打印

            console.log(state);

            this.count++

        },

        incrementNum(num){

            this.count += num

        }

    }

})

//暴露这个useCounter模块

export default useCounter

组件中:

actions函数在组件中使用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

    <div>

        <h1>actions的使用</h1>

        <h2>count的事值:{{counterStore.count}}</h2>

        <button @click="changeState">count+1</button>

        <button @click="incrementNum">count+20</button>

      </div>

<script setup>

    import useCounter from '../stores/counter'

    const counterStore = useCounter()

     

    function changeState(){

      counterStore.increment()

    }

    function incrementNum(){

      counterStore.incrementNum(20)

    }

</script>

运行结果并且看看state是什么

初始值是66,点了一次加1和点了一次加20

注意:state的结果是undefined 所以actions只能通过this访问store。getter的话state和this都能访问。

2.异步操作使用

在 actions 处理异步的时候呢,我们一般是与 async 和 await 连用。

counter模块: 这里大致演示,具体还看自己怎么使用。

    state:() => ({
        count:66,
        list:[]
    }),
	actions:{
        //大概演示这个异步流程
        async axiosData(){
            const res = await fetch("http://-----------------")
            if(code ==200){
                //收到数据保存到store
                this.list = res.data.list
                return "ok"
            }
        }

    }

组件使用:

1

2

3

4

5

6

7

8

9

10

11

12

13

<template>

      <!-- 遍历store的数据 -->

      <div v-for="item in counterStore.list"></div>

</template>

<script setup>

import useCounter from '../stores/counter'

const counterStore = useCounter()

counterStore.axiosData().then(res =>{

  console.log("成功",res);

})

</script>

就这样可以啦!!!

是不是比vuex简洁很多。。。

6.数据的持久化

pinia支持扩展插件

我们想实现数据持久化

npm i pinia-plugin-persist

1

2

3

4

5

6

7

8

9

10

11

12

13

14

export const useUserStore = defineStore({

  state () {

    return {

      count: 0,

      num: 101,

      list: [1, 2, 3, 4 ]

    }

  },

  persist: {

    enabled: true, // 开启缓存  默认会存储在本地localstorage

    storage: sessionStorage, // 缓存使用方式

    paths:[] // 需要缓存键

  }

})

Vue3中的pinia使用方法总结(建议收藏版)_vue.js_脚本之家

Logo

前往低代码交流专区

更多推荐