快速上手vue3的新武器--pinia

简介

vue3也流行好长一段时间了，基于vue2来比较，在vue3里面确实有好多大的变化，对于我们开发者来说，无疑又是一次新的挑战和新的学习。其中vuex大家在vue2里面相信大家也很熟悉了，它的引入可以使组件之间的通信变得灵活起来，极大的提高了我们对于项目里面状态的管理，但是呢，在vue3里面，出现了一个比它还更加精简的工具，它就是大菠萝-pinia.今天小编呢就来就分享自己的一些学习经验，来看看我们该如何快速上手这项新武器。ok,那就话不多说，我们直接进入主题！

如何使用

安装依赖包

第一步就是拉取依赖： npm i pinia

创建实例并挂载至全局

在src目录下创建文件夹store,在store下创建index.ts,接下来就是创建实例并导出：

import { createPinia } from 'pinia'

const store = createPinia()

export default store

在main.ts里面全局挂载：

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store)
app.mount('#app')

定义状态

在store目录下新建user.ts文件，在里面定义自己需要的状态信息：

import { defineStore } from 'pinia'
export const useUserstore = defineStore({
    id: "user",
    state: () => {
        return {
            name: '张三',
            age: 20,
        }
    },
    actions: {
        updateName(name: string) {
            this.name = name;
        },
        addAge() {
            setTimeout(() => {
                this.age++
            }, 2000)
        },
        subAge() {
            this.age--
        },
    },
})

使用状态管理

<script setup lang='ts'>
import { useUserstore } from "@/store/user";

const userStore = useUserstore();
const changeName = () => {
  userStore.updateName("李四");
};
const changeName2 = () => {
  userStore.updateName("张三");
};
const addAge = () => {
  userStore.addAge();
};
const subAge = () => {
  userStore.subAge();
};
</script>

<template>
  <div>
    <h2>pinia 的使用</h2>
    <div>name:{{ userStore.name }}</div>
    <div>age:{{ userStore.age }}</div>
    <div class="ca">
      <el-button type="primary" @click="changeName"
        >change name to 李四</el-button
      >
      <el-button type="primary" @click="changeName2"
        >change name to 张三</el-button
      >
    </div>
    <div class="ca">
      <el-button type="primary" @click="addAge">Add Age</el-button>
      <el-button type="primary" @click="subAge">Subtract Age</el-button>
    </div>
  </div>
</template>

小结

以上就是pinia最基础的使用方法，小编只是做了个简单的归纳，因为小编也还是菜鸟一枚，正在努力提升，与其说这是一篇文章，不如说他是我的一篇笔记，所以归纳的不那么完全，所以说的有问题的地方希望大神及时提出来，小编好及时改正。谢谢大家！