vue中pinia的使用

pinia使用

            三大核心

                state

                    用来存储数据的 必须是一个函数

                getters

                    获取一个新的数据集合

                actions

                    既是同步操作 也是异步操作

                    可以用来请求数据  也可以用来修改数据  等价于vuex中actions和mutations的合体

                在pinia中没有辅助函数这个一个说法

            1 安装

            npm i pinia --save-dev

            2 创建store文件

            import { defineStore } from 'pinia'

            export const 常量名 = defineStore('自定义名字', {

                state: () => {

                    return { count: 0 }

                },

                getters: {

                    自定义方法名() {

                        return

                    }

                },

                actions: {

                    自定义方法名() {

                        代码块

                    }

                }

            })

            在getters和actions中获取state中数据  需要使用this.state中属性名

            3 在main.js文件中引入

            import {createPinia} from 'pinia'

            createApp().use(createPinia()).mount()

            4 调用store

            在需要使用store的组件中 引入store

            import {自定义常量名} from './store/文件名.js'

            const store=自定义常量名()

            调用state

                {{store.state属性名}}

            调用getters

                {{store.getters方法名}}

            调用actions

                1 直接调用actions方法

                store.actions方法名()

                2 调用actions方法 并且传递参数

                store.actions方法名(实参)

                actions: {

                    自定义方法名(形参) {

                    }

                }

                3 直接修改state中数据

                store.$patch({

                    state中属性名: 新值

                })