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>