Pinia (pineapple)

1. What is? pinia

• vuex Lite version , and vue It is more recommended to use .
• The advantage is completely superior to vuex , So let's see pinia.

2. advantage

• pinia It is integrated. vuex5 All function points of the proposal , So pinia Namely Vuex5 Too much
• Vuex3 Use in Vuex4, And it can only be used as an excessive choice, which has great hidden dangers , So in Componsition API After birth , It also designs a new state management Pinia

Pinia and Vuex
Vuex： State、Gettes、Mutations( Sync )、Actions( asynchronous )
Pinia： State、Gettes、Actions( Both synchronous and asynchronous support )

3. Use

1. install

   npm install pinia

2. stay main.js Add

   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';// Import pinia
   const pinia = createPinia();// Call create pinia
   createApp(App).use(Antd).use(pinia).use(router).mount('#app')

3. To create pinia Warehouse ( establish /src/store/pinia.js)

   import { defineStore } from 'pinia';
   export const PiniaStore = defineStore('main', {  // export  pinia Warehouse 
     state: () => { // Equivalent to global  data()
       return {
         name: ' Escape dust ',
         age: 21
       }
     },
     getters: {},  // Equivalent to global computed
     actions: {}   // Equivalent to global methods
   })

4. Use

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