开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

Pinia

Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3。

Pinia的优势

1.Pinia拥有完整的 typescript 的支持； 2. 无mutations，相比Vuex更简单，更容易上手。 3. 自动添加Pinia,无需创建store，简化开发。 4. actions对同步异步支持非常好。 5. 代码分割好，非常优雅便于维护。

pinia的安装

npm install pinia --save

srore/index.ts

先看一下store/index.ts文件内容

    import { createPinia } from "pinia";

    const store = createPinia();

    export default store;

首先首行导入createPinia函数，然后通过调用createPinia()来创建store。

store/users.ts的demo

//src/store/user.ts

import { defineStore } from 'pinia'

export const useUserStore = defineStore({
  id: 'user', // id必填，且需要唯一
  state: () => {
    return {
      name: '张三'
    }
  },
  actions:{
    updataName(name:string):void {
        this.name = name;
    }
  }
})

我们首先导入了defineStore的方法，定义了id:'user',id必填，且需要唯一

state中return出去变量。在actions(0中定义函数方法。

接下来我们看一下main.ts的内容。

main.ts

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store';

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

我们注意，要use下store.

App.vue的内容

代码如下:

<template>
  <div>{{ userStore.name }}</div>
</template>

<script lang="ts" setup>
import { useUserStore } from './store/user'

const userStore = useUserStore();
userStore.updataName("李四");
</script>

我们正常创建组件部分和脚本部分。

我们记得从'./store/user'中导出useUserStore。

const userStore = useUserStore();

创建userStore，通过 useUserStore()来完成创建。

接下来我们调用userStore.updataName()的方法(之前在user.ts中定义的方法)记得传参。

userStore.updataName("李四");

看看效果吧

我们调出控制台

输入

npm run dev

好耶，vite还是很快的完成了。

看看

我们最后显示出来的字体是李四

而不是张三

说明我们定义的修改的函数生效了。

用Pinia.js 来重构一下之前Vuex的一个小Demo