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 = () => {//先获取tokenconst 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
   }
   );