pinia的使用笔记

pinia与vuex的区别

1.pinia没有mutations，只有state,getters,actions

2.官方网址:Pinia | The intuitive store for Vue.js

3.1安装:npm install pinia

注入pinia

3.2在main.js中进行引入

import { createPinia } from 'pinia'

const pinia = createPinia()

app.use(pinia)

3.3:根目录新建store/index.js写入:

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {

     state: () =>{

        return {

            counter:0,

        }

     },

    getters:{},

    actions:{}

  })

3.4在组件中调用:(传统的调用)

1.<template>

    <h2>k组件</h2>

    {{ store.num }}

    {{ store.age }}

</template>

<script setup>

 import { useStore } from "../store"

 const store = useStore()

 console.log(store)

</script>

2.解构方式的调用

<template>

    <h2>k组件</h2>

    {{ num }}

    {{ age }}

</template>

<script setup>

 import { useStore } from "../store"

 const store = useStore()

// 解构

let { num , age } = store

 console.log(store)

</script>

3.如果要修改组件里面的值的话:加入:

import { storeToRefs } from 'pinia'

即:

<template>

    <h2>k组件</h2>

    {{ num }}

    {{ age }}

    <button @click="changeName">修改名称</button>

</template>

<script setup>

 import { storeToRefs } from 'pinia'

 import { useStore } from "../store"

 const store = useStore()

// 解构

let { num , age } = storeToRefs(store)

const changeName = () => {

    num.value = 100

//方法里面实现批量更新

 store.$patch(state => {

        state.num++;

        state.age = 456

    })

}

</script>

3.pinia的getters和actions的使用(actions支持同步和异步加载)

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {

     state: () =>{

        return {

            num:0,

            age:18

        }

     },

    getters:{

        changeNum() {

            console.log('getters')

            return this.num + 100;

        }

    },

    actions:{

        upNum(val) {

            this.num += val

        }

    }

  })

在组件中使用:

<template>

<button @click="changeName">修改名称</button>

    <button @click="btn">操作</button>

</template>

<script setup>

 import { storeToRefs } from 'pinia'

 import { useStore } from "../store"

const store = useStore()

let { num , age ,changeNum } = storeToRefs(store)

//通过getters修改数据

const changeName = () => {

    // num.value = 100

    // age.value = 10

    // 批量更新

    store.$patch(state => {

        state.num++;

        state.age = 456

    })

}

//通过actions修改数据

const btn = () => {

    store.upNum(200)

}

</script>