Vue3之Pinia 快速入门

六边

已于 2023-03-19 16:24:08 修改

阅读量510

点赞数 7

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

于 2023-03-15 20:03:19 首次发布

本文链接：https://blog.csdn.net/m0_63831957/article/details/129541436

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态，类似 Vuex, 是 Vue 的另一种状态管理方案，支持 Vue2 和 Vue3。

1.pinia是什么？

我们都知道Vuex在Vue2中主要充当状态管理的角色，所谓状态管理，简单来说就是一个存储数据的地方，存放在Vuex中的数据在各个组件中都能访问到，它是Vue生态中重要的组成部分。

在Vue3中，可以使用传统的Vuex来实现状态管理，也可以使用最新的pinia来实现状态管理。

2.Pinia 的优势

Vue2和Vue3都支持
pinia中action支持同步和异步，Vuex不支持
良好的Typescript支持
体积非常小，只有1KB左右
pinia支持插件来扩展自身功能
pinia中只有state、getter、action，抛弃了Vuex中的Mutation

3.安装 Pinia

# 使用 npm
npm install pinia
# 使用 yarn
yarn add pinia

4.pinia的基本使用与概念

4.1准备工作

修改main.js，引入pinia提供的createPinia方法，创建根存储。

// main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//引入pinia中的createPinia方法
import {createPinia} from "pinia"
//创建根储存
const pinia  = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app')

4.2store

store就是数据仓库的意思，我们数据都放在store里面，可以读写操作。

//src/store/goods.js
//引入函数
import { defineStore } from "pinia";
// 调用defineStore函数创建Store 实体
export const goodsStore = defineStore('users', {
    
  })

创建store实体的defineStore函数有两个参数值

name：字符串，必传项，该store的唯一id。
options：对象，store的配置项，比如state等。

4.3添加state

我们需要存放的数据就放在state属性内。

//src/store/goods.js

import { defineStore } from "pinia";
export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"]
        }
    },
  })

4.4使用store

这时我们store里面的配置项state就存在数据了，我们就能够去使用它

//App.vue
<script setup>
 import {goodsStore} from "./store/store";
 const store = goodsStore()
 console.log(store)
</script>

打印出来我们刚刚的goods数据就在里面了

在引入数据的时候引入pinia中的storeToRefs函数这样修改的时候就不会丢失响应式

<script setup>
 import {goodsStore} from "./store/store";
 import { reactive } from "vue";
 import {storeToRefs} from 'pinia'
 const store = goodsStore()
const {goods} = storeToRefs(store)
 

</script>

<template>
  <div>
    <ul>
      <li v-for="(item,index) in goods" :key="index">
         {{ item }}
      </li>
    </ul>
  </div>
</template>

结果：这时就拿到了store仓库中的数据了

4.5修改数据

修改单个数据

 const  updataGoods=()=>{
  store.goods[0] = "西瓜"
 }

$patch : 修改多行数据

const path = ()=>{
  store.$patch({
    goods:["西瓜","兰花"]
  })
}

$state : 有数据就修改替换，没有数据就增加

const stata = ()=>{
  store.$state = {
    name:"wjd",
    age:"289"
  }
}

4.6重置数据

在我们修改了数据，需要回到初始数据的时候，这是时候就可以使用$reset()方法

 const reset = () => {
  store.$reset();
}

5.getters属性

getter就相当于Vue中的计算属性，它的作用就是返回一个新的结果

//src/store/goods.js
export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"],
            list : ["手机","电脑"]
        }
    },
    getters:{
        getGoods(state){
            return state.goods[0] + state.list[0]
        }
    }
  })

在页面中使用getters

//app.vue
<template>
  <div>
    <ul>
      <li v-for="(item,index) in goods" :key="index">
         {{ item }}
      </li>
      //使用使用这样的方式
      {{ store.getGoods }}
    </ul>
  </div>
</template>

getters传参

//src/store/goods.js
export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"],
            list : ["手机","电脑"]
        }
    },
    getters:{
        getGoods(state){
            return state.goods[0] + state.list[0]
        },
        //返回一个函数在调用的时候直接传递参数
        getass(state){
            return (num)=>{
                return num + state.goods[0]
            }
        }
    }
  })
//app.js 中调用
{{ store.getass("1：") }}

6.Actions属性

Action 相当于组件中的 method，用来放置一些处理业务逻辑的方法，我们有业务代码的话最好是写在Actions中。

export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"],
            list : ["手机","电脑"]
        }
    },
    getters:{
        getGoods(state){
            return state.goods[0] + state.list[0]
        },
        getass(state){
            return (num)=>{
                return num + state.goods[0]
            }
        }
    },
    actions:{
        setList(){
              //通过this.xx 访问相应状态
            this.list = [
                "麻将",
                "扑克"
            ]
        }
    }
  })

在页面中使用

//app.vue
<script setup>
 import {goodsStore} from "./store/store";
 import { reactive } from "vue";
 import {storeToRefs} from 'pinia'
 const store = goodsStore()
 const {goods} = storeToRefs(store)
 store.setList()
</script>

7.所有代码

//main.js
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')

// src/store/store.js

import { defineStore } from "pinia";
// 调用defineStore函数创建Store 实体
export const goodsStore = defineStore('users', {
    // state
    state: () => {
        return {
            goods:["商品1","商品2"],
            list : ["手机","电脑"]
        }
    },
    getters:{
        getGoods(state){
            return state.goods[0] + state.list[0]
        },
        getass(state){
            return (num)=>{
                return num + state.goods[0]
            }
        }
    },
    actions:{
        setList(){
            this.list = [
                "麻将",
                "扑克"
            ]
        }
    }
  })

//app.vue

<script setup>
 import {goodsStore} from "./store/store";
 import { reactive } from "vue";
 import {storeToRefs} from 'pinia'
 const store = goodsStore()
const {goods} = storeToRefs(store)
 const  updataGoods=()=>{
  store.goods[0] = "西瓜"
 }
 const reset = () => {
  store.$reset();
}
const path = ()=>{
  store.$patch({
    goods:["西瓜","兰花"]
  })
}
const stata = ()=>{
  store.$state = {
    name:"wjd",
    age:"289"
  }
}
store.setList()
</script>

<template>
  <div>
    <ul>
      <li v-for="(item,index) in goods" :key="index">
         {{ item }}
      </li>
      <button @click="updataGoods">修改</button>
      <button @click="reset">重置</button>
      <button @click="path">批量</button>
      <button @click="stata">覆盖修改</button>
      {{ store.getass("1：") }}
    </ul>
  </div>
</template>
<style scoped>
div{
  width: 100vw;
  height: 100%;
}
li{
  list-style: none;
}
</style>