Pinia（vuex状态管理工具替代品）

• 1. 提供更加简单的API (去掉了 mutation )
• 2. 提供符合组合式风格的API (和 Vue3 新语法统一)
• 3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块
• 4. 搭配 TypeScript 一起使用提供可靠的类型推断

Pinia官网

main.js操作：

import { createApp } from 'vue'
//导入pinia
import { createPinia } from 'pinia'

import App from './App.vue'

//以App作为一个参数，创建一个应用实例对象
const app = createApp(App)
//创建一个Pinia实例，并加入到app应用中
app.use(createPinia())
//挂载到id为app的节点上
app.mount('#app')

/stores/counter.ts

import {ref, computed} from 'vue'
//导入defineStore方法
import {defineStore} from 'pinia'
import axios from "axios";
//导出
export const useCounterStore = defineStore('counter', () => {
    //数据（state）
    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)

    //修改数据的方法 action（同步 + 异步）
    function increment() {
        count.value++
    }

    const API_URL = '放自己的url哈';
    const list = ref([]);
    //异步action
    const loadList = async () => {
        const res = await axios.get(API_URL);
        list.value = res.data.data;
    };
    //以对象的方式return供组件使用
    return {count, doubleCount, increment, list, loadList}
})

组件使用：

<template>
    <button @click="counterStore.increment">{{counterStore.count}}</button>
    {{counterStore.doubleCount}}

    <div v-for="(item,key) in counterStore.list">{{item.name}}</div>
</template>

<script setup>
    import {storeToRefs} from 'pinia';
    import {onMounted} from 'vue';
    //导入useCounterStore方法
    import {useCounterStore} from "../../stores/counter";
    //坑1：要执行方法得到store实例对象
    const counterStore = useCounterStore();
    //坑2：对数据，需要使用storeToRefs包裹后才可解构赋值，不能直接解构赋值（会造成响应式丢失）
    //但是对方法，需要直接解构赋值
    // const {count} = storeToRefs(counterStore);//数据
    // const {imcrement} = counterStore;//方法
    onMounted(()=>{
        counterStore.loadList();
        console.log(counterStore.list);
    })

数据持久化---pinia-plugin-persistedstate

Pinia的存储是基于内存的，刷新就丢失，为了数据持久化，需要搭配pinia-plugin-persistedstate插件使用： 运行机制：在设置state的时候会自动把数据同步给localstorage，在获取state数据的时候会优先从localStorage中取

插件准备

下载pinia-plugin-persistedstate插件：

npm/pnpm i pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate

下载后在main.ts中引入注册：

import { createApp } from 'vue'
//导入pinia
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

import App from './App.vue'
import router from './router'

//创建一个Pinia实例，并加入到app应用中
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
//坑：注意这里是pinia实例注册piniaPluginPersistedstate插件，不是app！！！！！！！！！！
app.use(pinia);
app.use(router)

//挂载到id为app的节点上
app.mount('#app');

插件使用

创建Store 时，将 persistent 选项设置为 true（这里是组合式写法） ，如下：

import {ref} from 'vue';
import {defineStore} from "pinia";
import {loginAPI} from "@/apis/layout";

export const useUserStore = defineStore('user', () => {
    const useInfo = ref({});
    const getUserInfo = async ({account, password}) => {
        const res = await loginAPI({account, password});
        userInfo.value = res.result;
    };
    return {useInfo, getUserInfo};
}, {
    //坑1，注意persist的位置，是defineStore的第三个参数哈
    //坑2：注意要重新启动项目，否则存的可能不是你想要的值
    persist: true
});

选项式写法：

import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: '你好 pinia',
    }
  },
  persist: true,
})

数据持久化---vue-cookies

vue-cookies将数据存储在cookies中

下载：

npm install vue-cookies --save

在main.ts中引入注册

//引入vue-cookies
import $cookies from 'vue-cookies';
import App from './App.vue'
import router from './router'

//注册vue-cookies
app.use($cookies);
app.use(router);

//挂载到id为app的节点上
app.mount('#app');

使用： 可以在任何地方直接使用：如下

$cookies.方法名()
例如：
坑：注意要重新启动项目，否则cookies存的可能不是你想要的值
$cookies.set('name','lilei');
$cookies.get('name')