pinia-vue状态管理库 的安装与使用

pinia-vue状态管理库 的安装与使用

Pinia 是 Vue 的专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品。

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

1.安装

npm install pinia

2.配置
创建一个 pinia,并将其挂载到应用程序：

import { createApp } from "vue";
import { createPinia } from "pinia"; 
import App from "./App.vue";
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount("#app");

3.应用实例

• 创建一个stores文件夹子，在其下创建counter.js
  
• counter.js

import { defineStore } from "pinia";
import { ref ,computed} from "vue";
import axios from 'axios'
export const useCounterStore = defineStore("counter", () => {
// 这里和组合式API写法一样
// 创建一个count变量和修改count的方法increment
//定义数据(state)
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
// getter定义->使用computed函数进行模拟
 const doubleCount = computed(() => count.value * 2);
//  定义异步action
const list =ref ([])
const API_URL = "http://geek.itheima.net/v1_0/channels"
const getList = async()=>{
const res = await axios.get(API_URL)
list.value =res.data.data.channels
}
  // 将以上内容return出去
  return {
    count,
    increment,
    doubleCount,
    getList,
    list
  };
});

• App.vue

<script setup>
import { onMounted } from "vue";
import { useCounterStore } from "../src/stores/counter";
import { storeToRefs } from "pinia";
// 执行方法得到实例对象
const counterStore = useCounterStore();
// 直接解构赋值->响应式丢失
// const {count,doubleCout} = counterStore
// 保持响应式 ->storeTorefs
//const { count, doubleCout } = storeToRefs(counterStore);
// 方法 直接从原来的counterStore中解构赋值
const { increment } = counterStore;
// 触发action
onMounted(() => {
  counterStore.getList();
});
</script>

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

  <div>
    <ul>
      <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

4.pinia-plugin-persistedstate：pinia数据持久化存储

刷新浏览器后，重新加载页面时会重新初始化 vue、 pinia，而 pinia 中状态的值仅在内存中存在，而刷新导致浏览器存储中的数据就没了。
pinia-plugin-persistedstate运行机制：
在设置state的时候会自动把数据同步给localStorage，在获取state数据的时候会优先从localStorage中取。

①安装
npm install pinia-plugin-persistedstate
②pinia注册插件：main.js

import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia =createPinia()
app.use(pinia);
pinia.use(piniaPluginPersistedstate)

③需要持久化的store进行配置

 {
    persist: true, //自动保存LocalStorage
    // 设置state时  把数据同步给localstorage
  }

其他详细信息请参考pinia官网：https://pinia.web3doc.top/