pinia---状态管理工具

香香爱编程2024-02-01 17:38

state、actions、getters

对ts支持好

vuex和pinia区别

Vuex`的核心概念有：`state`,`getters`,`mutations`,`actions`,`moudles`五个部分

`Pinia`的核心概念有：`state`,`getter`,`action`三个部分

`Vuex`对state的修改推荐使用`mutations`中的方法进行修改,

`Pinia`直接对state进行修改

Pinia中 getter，action 也可通过 `this` 访问整个 store 实例

安装：npm install pinia

main.js

javascript 复制代码

// 导入createApp函数
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

// 创建pinia实例
const pinia = createPinia()

//  创建App实例挂载到id为app的dom元素
const app = createApp(App)
app.use(pinia)

app.mount('#app')

store/user.js

javascript 复制代码

// 定义用户仓库
import { defineStore } from 'pinia'
// defineStore() 创建store实例的函数 
// 第一个参数 store的唯一标识 类似于模块
// 第二个参数 对象描述仓库可以提供state getters actions
// 返回值 是创建store实例的方法
// 规范 useXXXXStore
const useUserStore = defineStore('user',{
  // state getters actions
  state: ()=> {
    return  {
      userInfo: {
        username: 'admin',
        age: 20
      }
    }
  },
  //转成大写
  getters:{
    upperCase(){
      return this.userInfo.username.toUpperCase()
    }
  },
  //同步异步都可以
  actions:{
    change(){
      this.userInfo.username="香香"
    }
  }
})
//导出
// 导出user仓库实例的方法
export default useUserStore

App.vue

javascript 复制代码

<template>
  <div>
    <button @click="change">按钮</button>
    <p>{{ userStore.userInfo.username }}</p>
    <button @click="userStore.change">第二种方式</button>
    <!-- 变成大写 -->
    <p>{{ userStore.upperCase }}</p>
  </div>
</template>

<script setup>
import useUserStore  from './store/user'
const userStore =useUserStore ()
console.log(userStore)
const change=()=>{
  userStore.change()
}
</script>

<style>

</style>

pinia模块化

如果有多个模块ia，就需要导入很多，代码会很臃肿，所以在一个模块实现，app.vue只需要导入一次就能拿到值'

store/index.js'

javascript 复制代码

import useUserStore from "./user";
import useCounterStore from "./counter";

export default function useStore() {
  return {
    user:  useUserStore(),
    counter: useCounterStore()
  }
}

在App.vue

javascript 复制代码

<template>
    <p>{{store.counter.num}}</p>
</template>
//导入
import useStore from './store/index.js'
//调用赋值
const store=useStore()