pinia使用

原创已于 2022-11-24 18:08:50 修改 · 928 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2022-11-24 15:25:18 首次发布

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中使用Pinia进行状态管理，包括创建Pinia实例，定义状态仓库，读取和修改状态，以及不同方式的更新状态操作。同时展示了Pinia中不同Store之间的调用方法，帮助开发者理解Pinia在实际项目中的应用。

1、main.js注册pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)


app.mount('#app')

2、定义pinia仓库

// 1、定义状态容器
// 2、修改容器中的state
// 3、仓库中的action的使用

import { defineStore } from "pinia";
import { AMStore } from "./AM";
// defineStore参数1为仓库名称(唯一值)
export const mainStore = defineStore('main', {
  state: () => {
    return {
      hello: 'hello world',
      count: 1,
      phone:15174338909
    }
  },
  getters: {
    phoneHidden(){
      return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
    }
  },
  actions: {
    changeState () {
      this.count = this.count + 4
      this.hello = '第四种'
      this.phone ='15090124212'
    },
    getList() {
      console.log(AMStore().list,'AMStore().list');
    }
  }
})

3、读取状态 tip：（解构出的pinia状态为非响应式，需要使用storeToRefs方法变为响应式）

<template>
  <div>
    {{ hello }} 
    {{count}}
  </div>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { mainStore } from '../store/index'

// 读取pinia状态
const {hello,count} = storeToRefs(mainStore())
</script>

4、修改pinia状态的方式（）

<template>
  <div>
    <button @click="handleClick">修改状态数据</button>
    <button @click="handleClickPatch">第二种patch</button>
    <button @click="handleClickPatchFn">第三种patch改版</button>
    <button @click="handleClickAction">第四种action</button>
    <button @click="getList">Store的互相调用</button>
  </div>
</template>
<script setup>
// 读取pinia状态
import { mainStore } from '../store/index'
const store = mainStore()

// 改变pinia状态的几种方式
// 第一种方法 (也可以多数据改变，但是不推荐)
const handleClick = () => {
  store.count++
}

// 第二种方法 (不能写业务逻辑，只能多数据改变，官方推荐(优化过的))
const handleClickPatch = () => {
  store.$patch({
    count: store.count + 2,
    hello: 'AM hello'
  })
}

// 第三种方法 (第二种改版，可以写业务逻辑)
const handleClickPatchFn = () => {
  store.$patch((state) => {
    if (state.count < 15) {
      ;(state.count = state.count + 3), (state.hello = '第三种')
    }
  })
}

// 调用第四种方法
const handleClickAction =()=> {
  store.changeState()
}

// Pinia中Store的互相调用
const getList =()=>{
  store.getList()
}
</script>

5、Pinia中Store的互相调用

// AM store

import { defineStore } from "pinia";

export const AMStore = defineStore('AM', {
  state: () => {
    return {
      list :['小黄','小黑','小白']
    }
  },
})

// 1、定义状态容器
// 2、修改容器中的state
// 3、仓库中的action的使用

import { defineStore } from "pinia";
import { AMStore } from "./AM";
// defineStore参数1为仓库名称(唯一值)
export const mainStore = defineStore('main', {
  state: () => {
    return {
      hello: 'hello world',
      count: 1,
      phone:15174338909
    }
  },
  getters: {
    phoneHidden(){
      return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/,'$1****$2')
    }
  },
  actions: {
    changeState () {
      this.count = this.count + 4
      this.hello = '第四种'
      this.phone ='15090124212'
    },
    getList() {
      console.log(AMStore().list,'AMStore().list');
    }
  }
})