在vue2中，设置一个新手引导弹框，该弹框只会在第一次进入页面打开，用户点击开始配置后把新手引导已查看的状态记录到浏览器缓存，用户下次打开页面时，若浏览器缓存有这个记录则不会弹出新手引导

在Vue2中实现这种新手引导弹框功能，你可以使用Vuex作为状态管理工具来存储用户的引导状态，并利用浏览器的localStorage进行数据持久化。以下是简化的步骤：

1. **创建Vuex store**：
安装`vuex`和`axios`依赖：

   npm install vuex axios

创建一个`store.js`文件，定义状态和 mutations：

   import Vue from 'vue'
   import Vuex from 'vuex'

   export default new Vuex.Store({
     state: {
       isGuided: true, // 初始状态，假设为未查看过
     },
     mutations: {
       setGuided(state) {
         localStorage.setItem('isGuided', JSON.stringify(state.isGuided));
         state.isGuided = false; // 设置为已查看
       },
       setIsGuided(state, viewed) {
         if (viewed) { // 用户点击开始配置
           state.isGuided = true;
           if (!localStorage.getItem('isGuided')) {
             state.isGuided = true; // 如果首次访问，再次设置为未查看
           }
         } else {
           state.isGuided = localStorage.getItem('isGuided') === 'true'; // 检查缓存
         }
       },
     },
   })

2. **在组件中监听状态并显示引导弹框**：
在需要展示引导弹框的组件中，导入store并监听`isGuided`状态变化：

   <script>
   import { mapState } from 'vuex';
   
   export default {
     computed: {
       ...mapState(['isGuided']),
     },
     methods: {
       startConfig() {
         this.$store.commit('setIsGuided', true); // 用户点击开始配置
         this.showGuide(); // 显示引导
       },
     },
     mounted() {
       if (!this.$store.state.isGuided) {
         this.showGuide(); // 页面加载时检查缓存
       }
     },
     methods: {
       showGuide() {
         if (this.isGuided) {
           // 显示新手引导弹框
           // 这里可以添加对应的DOM操作或者使用第三方库如Quasar或Element Plus的提示组件
         } else {
           // 弹框隐藏
         }
       },
     },
   };
   </script>