Vue3使用Vuex 教程(这才是真正的小白教程！)

我的项目是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格。当然了，可能是我只会了基础，所以大家一起来学习呀！！！