我的项目是vue3+element-plus
我是个菜鸡,我不懂前端。想做一个tags的导航标签页。但是点击标签页之后页面仍然是会重新请求。感觉这不就跟没做一样吗?
遂百度GPT,第一种方式采用的就是存储到session里。搞了大半天,突然觉得这样好捞,遂采用vuex。虽然两者理论上区别不大,但是说起来vuex有B格
查看了一些教程,因为我是刚做前端,一边百度一边写代码,我是不懂vuex的,虽然看着好像也不复杂……我承认我笨B……
开整~~~~
首先,npm安装vuex。这个肯定是小白也知道。
npm i vuex
然后就是创建一个vuex的store。网上有说什么仓库的叫法,就是数据存储的仓库呗~
我这里其实就遇到一个坑的,一开始我不会用,以为是在A页面创建store,然后其他页面就能访问数据了,或者就是单页面引入,巴拉巴拉之类的。
主要一开始看到他的写法是这样的
import { createStore } from 'vuex'
因此我是认为。这东西是写在.vue页面的,就像我前面说的,不就是存页面的数据吗? 漏漏漏~~大漏特漏~~~
这里说下我搞懂后的理解。所谓的store仓库是必须在main.js去挂载的(如果我说的不对,那说明我还是理解的不透彻了)。这样才能全局去访问。至于页面的数据怎么往里面存嘛~~~一步一步来,先看我main.js的挂载
//vuex import { createStore } from 'vuex' //每个页面的store信息 import homePage from './config/vuex/homePage' import homePanelPage from './config/vuex/homePanelPage' import messageBoardPage from './config/vuex/messageBoardPage' //存储信息 const store = createStore({ modules: { homeStore: homePage, homePanelStore: homePanelPage, messageBoardStore:messageBoardPage } }); var app = createApp(App) app.use(store)
首先是使用createStore去创建一个store,也就是所谓的仓库,其次我导入的那三个xxxPage文件。是我针对于单独的页面去设计的……怎么形容呢,就是每个页面要存储访问的键值对吧,key—value。别慌,等下看代码就知道了。 不过还是可以先去看官网的注释,看看这些属性都是干嘛的。
modeles,官网的解释是,如果都放在一起,程序变得复杂时,就会臃肿,因此可以分割成模块。so,homeStore就是home页面的store,messageBoardPage就是messageBoard页面的store,这应该很好理解吧?
现在, 开始看import messageBoardPage from './config/vuex/messageBoardPage' 导入的这个页面的内容
const state = { echartDatas: null, // 存储图表数据 sitestats: null, // 存储统计数据 }; const mutations = { upEchartDatas(state, echartDatas) { state.echartDatas = echartDatas; }, upSitestats(state, sitestats) { state.sitestats = sitestats; }, }; export default { namespaced: true, // 启用命名空间 state, mutations, };
state存的就是数据源,我是理解为键值对,通过key去访问value。等下怎么访问的我会写,别急~~~ 这样你应该很清楚的知晓state是干嘛的了吧?官网或者其他博客解释的挺专业的,听不懂。你就理解成数据源,键值对就行,完全够用!mutations,可以理解为事件。我觉得理解成方法集合比较好理解。可以看到代码里有两个方法upEchartDatas和upSitestats。通过名字可以看到是用来修改的,up是update的简写。然后有两个参数,state和echartdatas。这个state是当前这个"页面"的state(数据源集合)。这个echartdatas是我自己起的名字,这个代表新的数据,方法的内容就是新数据替换老数据的结果。简单不?再补充一点。官网形容mutations 是说 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。嘶。反正我第一眼看着懵逼的很。吃了没文化的亏啊…那我现在的理解就是,修改vuex里store的数据时,只能调用mutations 里的方法。当然,这里的说法叫提交,少废话看代码怎么使用的。
<script setup type="text/javascript"> // vuex import { useStore } from "vuex"; const store = useStore(); onMounted(() => { if (store.state.homeStore.echartDatas == null) { //获取图表数据 axios.get("BBS_SiteStats/GetEchartLine", null, null, (res) => { var data = JSON.parse(res.data); Object.assign(echartDatas, data); }); } else { Object.assign(echartDatas, store.state.homeStore.echartDatas); } //获取统计信息 if (store.state.homeStore.sitestats == null) { axios.get("BBS_SiteStats/GetSiteStats", null, null, (res) => { var data = JSON.parse(res.data); Object.assign(sitestats, data); }); } else { Object.assign(sitestats, store.state.homeStore.sitestats); } }); </script>
使用store需要使用vuex中的useStore。然后用store.state就行了。因为我是采用的模块化的方式,所以store.state.homeStore这个homeStore就是刚才配置的home页面的‘数据仓库’了,然后继续.来获取某一值。比如我贴的代码里的store.state.homeStore.sitestats。这里我是在onMounted页面加载完成后就去判断值是否等于null。因为我们默认设置的实话,值全都是null,只有在访问页面时,才会提交进去数据。我这里的话,如果仓库有值就赋值,没值就请求接口。至于提交到store‘仓库’的代码,我写法watch中。监听!因为vue的数据都是动态绑定的,因此更改的时候都会获取到新的数据。别慌,提交(更新)数据源的代码在这里!
const sitestats = reactive({}); watch( sitestats, (newvalue) => { store.commit("homeStore/upSitestats", newvalue); }, { deep: true } );
很简单store.commit("homeStore/upSitestats", newvalue);commit,可不就是提交嘛?第一个参数是你mutations里的方法,因为模块化了,所以我都代码里要加上是哪一个页面的数据,例如这个
"homeStore/upSitestats"。而newvalue则是监听到的修改之后的新的值,直接这样就修改咯~你要问怎么修改的,那你去看看mutations里的upSitestats方法呀~~~
{ deep: true }好像是,怎么解释呢。因为实际效果我并不确认,结合官网的说法就是,如果你的数据源是数组这种,它可以监听到你的子项是不是也修改了。差不多这意思吧,反正写上去吧,也不影响
还有一个点就是,刷新页面数据就没了,所以一开始我说,和session区别不大,但是听着有B格。当然了,可能是我只会了基础,所以大家一起来学习呀!!!