Vue.js 状态管理库Pinia

Pinia ：Vue.js 状态管理库

Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

1. 要使用Pinia ，得先安装

   npm install pinia
   

   
2. 在main.js中导入Pinia 并使用
   
   示例代码：

   import './assets/main.scss'
   
   import { createApp } from 'vue'
   import ElementPlus from 'element-plus'
   //导入 element-plus 的样式
   import 'element-plus/dist/index.css'
   import router from '@/router'
   import App from './App.vue'
   //导入 createPinia
   import { createPinia } from 'pinia'
   
   
   const app = createApp(App);
   //创建一个 pinia 实例
   const pinia = createPinia();
   //使用 pinia
   app.use(pinia);
   
   app.use(router);
   app.use(ElementPlus);
   app.mount('#app')
   

3. 在src目录下，创建stores文件夹，并创建token.js文件。
   
   示例代码：

   //定义 store
   import {defineStore} from 'pinia';
   import {ref} from 'vue';
   /*
       第一个参数：名字，唯一性
       第二个参数：函数，函数的内部可以定义状态的所有内容
   
       返回值：函数
   */ 
   export const useTokenStore = defineStore('token', ()=>{
       //定义状态内容
   
       //1.响应式变量
       const token = ref('')
   
       //2.定义一个修改token的函数，用来修改token的值
       const setToken = (newToken) => {
           token.value = newToken;
       }
   
       //3.定义一个移除token值的函数
       const removeToken = () => {
           token.value = '';
       }
   
       return {
           token,setToken,removeToken
       }
   
   });
   

4. 在组件中使用Pinia,即使用刚才创建的useTokenStore。
   用Pinia是为了存储token,并在多个组件中使用这个token。

• 首先，登录成功后，会得到一个token，把该token存储到Pinia

  示例代码：

  //导入 有Pinia函数的token.js文件
  import { useTokenStore } from '@/stores/token'
  const tokenStore = useTokenStore();
  
  //登录函数
  const login = async () => {
      //调用接口，完成登录
      let result = await userLoginService(registerData.value);
      //alert(result.msg ? result.msg : '登录成功');
      ElMessage.success(result.msg ? result.mag : '登录成功');
  
      //把得到的token存储到pinia中
      tokenStore.setToken(result.data);
  
      //跳转到首页，使用useRouter切换组件，完成跳转
      router.push('/');
  }
  

• 在调用后端接口的js文件中，发送请求前，先获取Pinia里的token,
  发送请求时，把token这个参数传给后端就行了。

  示例代码：

  //导入请求工具request.js，就相当于可以直接使用请求工具里的axios了
  import request from '@/utils/request.js'
  //导入前边创建的带Pinia的token.js文件
  import { useTokenStore } from '@/stores/token.js'
  
  //调用后端接口的函数
  export const articleCategoryListService = () => {
      //先获取token
      const tokenStore = useTokenStore();
  
      //在pinia中定义的响应式数据,都不需要.value，这里直接传token这个参数就行
      return request.get('/category',{headers:{'Authorization':tokenStore.token}})  
  }
  

Pinia持久化插件-persist

• Pinia默认是内存存储，当刷新浏览器时，会丢失数据。
• Persist 插件可以将pinia中的数据持久化的存储

1. 要使用persist，首先安装persist

   npm install pinia-persistedstate-plugin
   

   

2. 在Pinia中使用persist

   • 先在main.js里导入persist的createPersistedState函数
     
     示例代码：

   import './assets/main.scss'
   
   import { createApp } from 'vue'
   import ElementPlus from 'element-plus'
   import 'element-plus/dist/index.css'
   import router from '@/router'
   import App from './App.vue'
   import { createPinia } from 'pinia'
   //导入 persist 的 createPersistedState函数
   import { createPersistedState } from 'pinia-persistedstate-plugin'
   
   const app = createApp(App);
   const pinia = createPinia();
   
   //创建一个 persit 实例
   const persist = createPersistedState();
   //在 pinia 中，使用 persist
   pinia.use(persist);
   
   app.use(pinia);
   app.use(router);
   app.use(ElementPlus);
   app.mount('#app')
   

3. 定义状态Store时，指定持久化配置参数。
   在stores文件夹的token.js中，指定持久化存储。
   

   示例代码：

   import {defineStore} from 'pinia';
   import {ref} from 'vue';
   
   export const useTokenStore = defineStore('token', ()=>{
       const token = ref('')
       const setToken = (newToken) => {
           token.value = newToken;
       }
       const removeToken = () => {
           token.value = '';
       }
       return {
           token,setToken,removeToken
       }
   },
   {
       //持久化存储
       persit:true
   }
   );