我的项目是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格。当然了,可能是我只会了基础,所以大家一起来学习呀!!!
posted on 2023-09-04 00:33  尝尝手指  阅读(225)  评论(0编辑  收藏  举报