解决Vue3响应式布局的一种方法，基于vuex的一种解决办法

可能遇到页面无法更新的问题：

        当从后端拿到一个不是响应式的数据，此时需要在页面中展示它，或者对数据做一个可持续化存储，再去localStorage中拿数据进行渲染。当再次修改数据的时候视图不会发生更新，此时应该想到这个数据可能不是响应式数据。

解决办法：

        可能当你没意识到数据是否是响应式的时候，第一反应就是watch监听一下数据，或者写个计算属性computed去处理，这个想法很好，但是前提是这些监听的都是响应式的数据，你可以先console.log()一下，用isRef()方法去看看这个数据或变量是不是响应式的。下面直接上图了：

        上面是vuex的一下简单配置，这个用vuex方法解决响应式的办法大家可以先拿着用。

重点解释：

       简单解释一下，就是一个数据是响应式的数据，我可能想做可持续化存储，把它放到sessionStorage中，在另一个页面我想要拿到这个数据，如果我直接去拿，可能破坏了它的响应式，如const a = localStorage.getItem('id');或者const a = ref(localStorage.getItem('id'))直接给它加上一层ref，大家感兴趣可以去看看ref的用法，后期我可能会出一期。这样在另一个页面去渲染这个a，想去改变这个存储的数据的时候让a也发生改变，测试的结果是不会发生视图更新，下面用一个案例来解释。

案例解释：

废话不多说，上图：

       这个是Main.vue页面，这个案例要做的工作是在Main.vue页面中写一个输入框，点击提交后在另一个页面Hello.vue中能够拿到响应式数据，当修改text对应的文本值的时候，Hello.vue中的页面视图可以发生更新。

       第三个用的是vuex的可持续化插件，其实用localStorage或sessionStorage也行。

页面展示：

       大家也可以在hello页面中去修改，对应的值也会发生改变，也可以在sessionStorage中看到，相应的值也会被修改。

       这个方法主要是给大家提供一种解决vue3响应式的一个小方法，原理啥的没讲，可能我自己理解的也不那么深，大家要是遇到过这个问题可以试试这个方法。