Pinia
Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3。
Pinia的优势
1.Pinia拥有完整的 typescript 的支持；
- 无mutations，相比Vuex更简单，更容易上手。
- 自动添加Pinia,无需创建store，简化开发。
- actions对同步异步支持非常好。
- 代码分割好，非常优雅便于维护。
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还是很快的完成了。
看看
我们最后显示出来的字体是 李四
而不是张三
说明我们定义的修改的函数生效了。
