用过pinia再也不想用vuex了

1. 安装
   yarn add pinia
npm install pinia
2. 在main.ts中集成
   const pinia = createPinia()
const app = createApp(App)
app.use(pinia) // 核心，注入插件

经过上述步骤以及可以使用pinia

• 直接上手，采用自定义的模式使用pinia，想象一下，把vuex的所有功能（state，actions…）完全想平常写代码一样，实现，不必拘束于state，actions，mutations等属性。

import { defineStore } from "pinia";//引入pinia，必填
export const useMyPinia = defineStore('myPinia',() => {
  // myPinia，是必须的，即使唯一的标识也是连接到devtools的标识。
  // useMyPinia约点俗称我们应写成usexxx
})
1
2
3
4
5

• 好了，至此pinia的商店已经搭建完毕，下一步在商店里实现vuex的所有功能。

import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useMyPinia = defineStore('myPinia',() => {
        let pinia = reactive({// 我们完全可以使用响应式，就像写普通的setup函数一样。
            name:'pinia商店',
            fruits:'暂时没有水果'
        })  // 参数pinia可以理解为vuex的state
        function add(){ // 可以理解为actions,mutatios的集合，
        //可以像action一样进行一些异步操作，如ajax请求。
        // 可以像mutations一样修改state的状态。
            pinia.fruits = 'apple'
        }
        return {
            pinia,add // 返回值必须，就像setup一样。
        }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 在组件中使用他们。

<template>
    <div>
        <h1>{{myPinia.pinia.name}}</h1>
        <el-button @click="myPinia.add">增加水果</el-button>
        <div>{{myPinia.pinia.fruits}}</div>
    </div>
</template>
<script lang="ts" setup>
import { useMyPinia } from '../../../../store/js';
const myPinia = useMyPinia()
// myPinia.pinia.name结果为 pinia商店
//	myPinia.pinia.fruits 结果为 暂时没有水果
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

• 初始效果如下
  

• 当我们点击按钮的时候,在add函数中
  pinia.fruits = 'apple'
  

• pinia的基本功能已经实现了！

在组件中直接修改state的数据

myPinia.$patch(state => { state.pinia.fruits = 'orange' })
就是这么简单，pinia中的fruits就变成orange了，打开开发者工具。

可以看到，数据直接被修改。

• 此刻已经可以用pinia完成vuex的所有功能了！

如果还想用state，actons，getters，那么pinia也提供了对应的属性。

export const useOtherPinia = defineStore('otherPinia',{
    state: () => (
        {
            person:{
                name:'小明',
                age:18
            }
        }
    ),
    actions:{
        add(){
            this.person.name = '小红'
        }
    },
    getters:{
        count: state => state.person.age * 10
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 在组件的使用方法和自定义pinia属性一模一样，这里不在赘述。