13

一、pinia概念

  • pinia:vue3官方的状态管理工具
  • 安装: npm install pinia -S

二、在main.js中使用pinia

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'createApp(App).use(createPinia()).mount('#app')

三、pinia的核心概念

  • store
  • state - 是一个函数，返回一个对象，对象里面就是可以共享的状态
  • getters - 是一个对象，可以定义类型计算属性的函数，当变量使用
  • acitons - 是一个对象定义方法修改state里面的数据，可以是异步的，也可以是同步的

四、创建store文件

// store/userStore.js
import {defineStore} from 'pinia'export const useUserStore = defineStore('user',{// 定义共享的状态state(){return {firstName:'张',lastName:'三',gender:'女',age:12}},getters:{// 请写普通函数，确保this就是当前的storefullName(){// 现在我们访问store里面的状态，直接通过thisreturn this.firstName + " "+ this.lastName;},// 打招呼的语言welcomeWord(){return "我的名字是:"+this.fullName+",我的性别是:"+this.gender+",我的年龄是:"+this.age;}},actions:{// 请写普通函数，确保this就是当前的store// payload就是调用函数时候传入的实参changeFirstName(payload){this.firstName = payload;},changeLastName(payload){this.lastName = payload},changeAgeAsync(payload){// 内层要是箭头函数setTimeout(()=>{this.age = payload},3000)}}
})

五、setup中使用store

import {useUserStore} from '../store/userStore'
// 获取store
const userStore = useUserStore()
// 使用state里面的状态
console.log(userStore.firstName)
// 使用getters里面的
console.log(userStore.welcomeWord)
// 修改state里面的状态
// 方法1 可以直接赋值修改
userStore.firstName = '李'
// 方法2 可以调用actions里面的方法修改
userStore.changeFirstName('王')

六、在选项式API中使用pinia

  • 安装:npm install pinia -S

七、使用pinia插件

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
createApp(App).use(createPinia()).mount('#app')

八、定义store文件

// store/taskStore.js
import {defineStore} from 'pinia'export const useTaskStore = defineStore('task',{state(){return {tasks:[{name:'吃饭',completed:true,id:1},{name:'睡觉',completed:false,id:2},{name:'学习',completed:false,id:3},]}},getters:{// getters的最外层要写普通函数// 未完成任务数count(){return this.tasks.filter(item=>!item.completed).length}},actions:{addTask(payload){this.tasks.push(payload)},addTaskAsync(payload){setTimeout(()=>{this.tasks.push(payload)},3000)}}
})

九、选项式api中使用辅助函数

<script>
import {mapGetters,mapState,mapActions} from 'pinia'
import {useTaskStore} from '../store/taskStore'
// mapGetters 可以把store里面的getters扩展到当前组件的computed属性，使用起来和当前组件的计算属性一样
// mapState 可以把store里面的State扩展到当前组件的computed属性，使用起来和当前组件的计算属性一样
// mapActions 可以把store里面的Actions扩展到当前组件的methods属性，使用起来和当前组件的methods一样
export default {computed:{...mapGetters(useTaskStore,['count']),   // this.count...mapState(useTaskStore,['tasks']),  // this.tasks},methods:{...mapActions(useTaskStore,['addTask']), // this.addTask({name:"xxx",id:xxx,completed:xxxx})}
}
</script>