Pinia学习

uidshen

于 2022-03-02 17:04:39 发布

阅读量210

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/uidshen/article/details/123234689

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Pinia是一个轻量级的状态管理库，用于Vue应用。通过简单的安装和引入，可以方便地创建和使用store。在store中定义state、actions和getters，然后在组件中通过useMainStore进行数据的获取和更新，支持多种更新数据的方法，如直接修改、$patch和actions调用。同时，使用storeToRefs可以确保数据的响应式。

摘要由CSDN通过智能技术生成

Pinia

Pinia是一个轻量级状态管理库

安装

npm install pinia

引入

// main.js
import { createPinia } from 'pinia'
app.use(createPinia())

创建store

// src -> store -> index.js
import { defineStore } from 'pinia'
export const useMainStore = defineStore('main', {
  // main 唯一值 作用类似 id
  state: () => ({
    count: 0,
    msg: '我是一条msg信息'
  }),
  actions: {
  	increment() {
      this.count++
    }
  },
  getters: {
    // this -> state
    countToString: state => String(state.count)
  }
})

使用

import { useMainStore } from '@/store/index'
setup(){
  const mainStore = useMainStore()
  // 方式一
  // mainStore.count++
  // 方式二 适用于多数据改变
  /*
    mainStore.$patch({
      count: mainStore.count + 1,
      msg: '信息+1'
    })
  */
  // 方式三
  /*
    mainStore.$patch(state => {
      state.count++
      state.msg = '信息+2'
    })
  */
  // 方式四
  mainStore.increment()
  // 获取getters
  const countStr = mainStore.countToString
}

import { useMainStore } from '@/store/index'
import { storeToRefs } from "pinia"
setup(){
  const mainStore = useMainStore()
  // const { count, msg } = mainStore // 该操作会导致数据失去响应式
  // 修改
  const { count, msg } = storeToRefs(mainStore)
  count.value++
}