pinia---状态管理工具

state、actions、getters

对ts支持好

vuex和pinia区别

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

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

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

  4. `Pinia`直接对state进行修改

  5. 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()
相关推荐
吃饺子不吃馅17 小时前
为什么SnapDOM 比 html2canvas截图要快?
前端·javascript·面试
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript
阿星做前端1 天前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧1 天前
Promise 的使用
前端·javascript
前端康师傅1 天前
JavaScript 作用域
前端·javascript
云枫晖1 天前
JS核心知识-事件循环
前端·javascript