首頁 > web前端 > Vue.js > Vue3中怎麼引入Pinia儲存庫並使用

Vue3中怎麼引入Pinia儲存庫並使用

WBOY
發布: 2023-05-14 19:13:04
轉載
1868 人瀏覽過

1.用自己喜歡的方式安裝

1

2

3

yarn add pinia

# 或者使用 npm

npm install pinia

登入後複製

2.main.js引入

1

2

3

4

5

6

7

8

import { createApp } from 'vue'

import App from './App.vue'

  

const app=createApp(App)

import { createPinia } from 'pinia' //引入pinia

app.use(createPinia())

  

app.mount('#app')

登入後複製

3.建立store檔案並設定內部的index.js檔案

1

2

3

4

5

6

7

8

9

10

11

12

import { defineStore } from 'pinia' //引入pinia

  

//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱

export const useCar=defineStore("test",{

    state: () =>{

        return  ({

            msg:"这是pinia",

            name:"小小",

            age:18

            }) //为了避免出错,返回的值用()包起来

    }

})

登入後複製

4.元件使用方法

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

<template>

    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>

    <button @click="modify">修改store.name</button>

</template>

  

<script>

import { defineComponent, ref } from &#39;vue&#39;;

import {

  reactive,

  toRefs,

  onMounted,

  onActivated

} from "vue";

import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入

export default defineComponent({

  let store=useCar() //接收

  setup() {

    const state = reactive({

      testMsg: "原始值",

    });

    onMounted(async () => {});

    onActivated(() => {})

    const methods = {

        modify(){

             store.name = state.testMsg //修改pinia里面的数据

             console.log(store.name)

        }

    };

    return {

      ...toRefs(state),

      ...methods,

    };

  }

})

</script>

登入後複製

5.重設store.$reset()

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

<template>

    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>

    <button @click="reset">重置store.name</button>

</template>

  

<script>

import { defineComponent, ref } from &#39;vue&#39;;

import {

  reactive,

  toRefs,

  onMounted,

  onActivated

} from "vue";

import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入

export default defineComponent({

  let store=useCar() //接收

  setup() {

    const state = reactive({

      testMsg: "原始值",

    });

    onMounted(async () => {});

    onActivated(() => {})

    const methods = {

        reset(){

             store.$reset() //重置pinia里面的数据

             console.log(store.name)

        }

    };

    return {

      ...toRefs(state),

      ...methods,

    };

  }

})

</script>

登入後複製

6.群體修改store.$patch,可以將pinia的資料進行相同修改

特點:批次修改但狀態只刷新一次

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

<template>

    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>

    <button @click="modify">修改store.name</button>

    <button @click="reset">重置store.name</button>

    <button @click="allModify">群体修改store.name</button>

</template>

  

<script>

import { defineComponent, ref } from &#39;vue&#39;;

import {

  reactive,

  toRefs,

  onMounted,

  onActivated

} from "vue";

import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入

export default defineComponent({

  let store=useCar() //接收

  setup() {

    const state = reactive({

      testMsg: "原始值",

    });

    onMounted(async () => {});

    onActivated(() => {})

    const methods = {

        modify(){

             store.name = state.testMsg //修改pinia里面的数据

             console.log(store.name)

        },

        reset(){

             store.$reset() //重置pinia里面的数据

             console.log(store.name)

        },

        allModify(){

             store.$patch({

              name:"花花",

              age:20,

            })

        }

    };

    return {

      ...toRefs(state),

      ...methods,

    };

  }

})

</script>

登入後複製

7.訂閱修改

1

2

3

4

5

//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次

store.$subscribe((mutation, state) => {

  // 每当它发生变化时,将整个状态持久化到本地存储

  localStorage.setItem(&#39;hello&#39;, JSON.stringify(state))

})

登入後複製

8.Getter

Getter 完全等同於Store 狀態的計算值。它們可以用 defineStore() 中的 getters 屬性定義。他們接收「狀態」作為第一個參數以鼓勵箭頭函數的使用:(ps:雖然鼓勵但是依然提供了非es6玩家的使用方式內部可以用this代表state)

1

2

3

4

5

6

7

8

9

10

11

//store/index.js文件

export const useStore = defineStore(&#39;main&#39;, {

  state: () => ({

    counter: 0,

  }),

  getters: {

    doubleCount: (state) => state.counter * 2,

  },

})

  

//组件中直接使用:  <p>Double count is {{ store.doubleCount }}</p>

登入後複製

9.Actions

在pinia中沒有提供mutaion 因為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

25

26

export const useStore = defineStore(&#39;main&#39;, {

  state: () => ({

    counter: 0,

  }),

  actions: {

    increment() {

      this.counter++//1.有this

    },

    randomizeCounter(state) {//2.有参数   想用哪个用哪个

      state.counter = Math.round(100 * Math.random())

    },

    randomizeCounter(state) {

        //异步函数.接口成功赋值

     ajax.hplBaseApi("app/productSelection/categoryRows", {}, "post").then((res) => {

        state.counter = res.data.length

     });

    }

  },

})

  

//组件中的使用:

  setup() {

    const store = useStore()

    store.increment()

    store.randomizeCounter()

  }

登入後複製

以上是Vue3中怎麼引入Pinia儲存庫並使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:yisu.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板