pinia(菠萝)

最新推荐文章于 2025-10-11 22:00:42 发布

原创最新推荐文章于 2025-10-11 22:00:42 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Pinia是Vue官方推荐的Vuex轻量替代品，整合了Vuex5的特性。它提供了与Vuex类似的State、Getters和Actions，但更易于使用。本文将介绍Pinia的安装、创建及使用方法，展示其在Vue应用中的优势。

1. 什么是pinia

vuex精简版，而且vue官方更加推荐使用。
优势又完胜于vuex ，下面我们来了解下pinia。

2.优势

pinia是整合了vuex5提案的所有功能点，所以说pinia就是Vuex5也不为过
Vuex3中使用Vuex4，并且还只能作为一个过度的选择存在很大的隐患，所以在 Componsition API 诞生之后，也就设计了全新的状态管理 Pinia

Pinia 和 Vuex
Vuex： State、Gettes、Mutations(同步)、Actions(异步)
Pinia： State、Gettes、Actions(同步异步都支持)

3. 使用

安装
```
npm install pinia
```

在main.js中加入

import App from './App.vue';
import router from './router';
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import { createPinia } from 'pinia';//导入pinia
const pinia = createPinia();//调用创建pinia
createApp(App).use(Antd).use(pinia).use(router).mount('#app')

去创建pinia仓库(创建/src/store/pinia.js)

import { defineStore } from 'pinia';
export const PiniaStore = defineStore('main', {  //导出 pinia仓库
  state: () => { //相当于全局的 data()
    return {
      name: '逸尘',
      age: 21
    }
  },
  getters: {},  //相当于全局的computed
  actions: {}   //相当于全局methods
})

使用

<style lang="less" src="./index.less" ></style>
<template>
  <div class="li-head">
    <a-button type="primary" style="margin-bottom: 16px" @click="setFold">
      <MenuUnfoldOutlined v-if="fold" />
      <MenuFoldOutlined v-else />
    </a-button>
    <div>{{ pinia.name }}</div>
    <div>{{ pinia.age }}</div>
  </div>
</template>
<script>
import { ref, watch, reactive } from 'vue';
import { PiniaStore } from '../../store/pinia';
const pinia = PiniaStore();
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons-vue';
export default {
  name: "head",
  components: { MenuFoldOutlined, MenuUnfoldOutlined },
  props: {
    fold: Boolean,
    setFold: Function
  },
  setup(props) {
    return { pinia }
  }
}
</script>