pinia(菠萝)

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. 使用

1. 安装

   npm install pinia

2. 在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')

3. 去创建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
   })

4. 使用

   <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>