Vue项目中使用vuex进行状态管理

这些都是我根据B站winWeb前端分享的个人空间_哔哩哔哩_Bilibili 的视频再自己动手进行实践的

Vuex的官方文档位置在这：Vuex 是什么？ | Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex事实上是将复杂的，非线性的用户操作，给予了一个响应式的关系，把用户在视图上进行的交互定义成操作（Action），根据用户的操作绑定的事件去修改状态（State），在根据状态去动态的修改视图（View），从而形成一个操作闭环。

下面是Vuex官方文档给出的一个单向数据流的示意图

下面我将去实践Vuex进行状态管理。

Tips：如果不进行开发大型单页应用，使用 Vuex 可能是繁琐冗余的。因此使用Vuex框架应该考虑到自己的项目实际情况，我这里是对Vuex进行实践，项目本身是一个轻量级。

使用Vuex

 使用Vuex首先我们需要进行安装，这里我们先进入项目目录下，使用命令进行安装。

注意！！！vue 的 2.x 版本对应 vuex 的 3.x 版本，vue 的 3.x 版本对应 vuex 的 4.x 版本

在使用时我们要注意自己的Vue.js的版本

# 自动安装
# npm
npm install vuex -S

# yarn 
yarn add vuex -S

# 给定版本进行安装
# npm 
npm install vuex@x.x.x -S

# yarn
yarn add vuex@x.x.x -S

在具体使用之前，我先简单介绍一下我这次实践去实现的功能。在之前的实践中，我们已经使用Element-plus实现了页面的基础布局，构造了一个左侧的菜单栏Aside和顶部的导航栏Header，在Header中有一个菜单按钮，这里我希望实现左侧菜单栏默认收起，在用户点击顶部菜单按钮时可以实现左侧菜单栏的收放，这里就需要Vuex实现菜单栏的状态管理了。

首先我们在src目录下新建store目录，并在其中配置index.js来引入、安装、创建并导出Vuex对象

store 对象中存放的东西是固定的，主要有：state、mutations、actions、getters、modules

下面是官方给出的状态管理图：

 下面是我的index.js的源代码：

import {createStore} from 'vuex'
//vuex做状态管理
export default createStore({
    state:{
        //控制el-menu收放的状态变量
        isCollapse:true
    },
    mutations:{
        updateIsCollapse(state, payload) {
            state.isCollapse=!state.isCollapse;
        }
    }
})

然后就需要在main.js中进行挂载，与router的挂载类似：

import { createApp } from 'vue'
...
import store from './store/index.js'

const app = createApp(App);
...
app.use(store);
app.mount('#app');

然后在CommonAside中的el-menu标签中进行绑定，使用$store.state.xxx进行使用

<template>
    <el-aside>
        <el-menu 
            class="el-menu-vertical-demo menu" 
            background-color="gray"
            text-color="white"
            :collapse="$store.state.isCollapse"
            :collapse-transition="false"
            >
...

这时候实际上已经将collapse和store中的isCollapse变量进行了绑定，再之后我们就需要给它绑定事件。下面是CommonHeader中绑定事件的部分代码：

<template>
    <el-header>
        <div class="l-content">
            <el-button size="small" plain @click="handleCollapse">
                <el-icon :size='20'>
                    <Menu />
                </el-icon>
            </el-button>
            <h3>首页</h3>
        </div>
        <div class="r-content">
            ...
        </div>
    </el-header>
</template>

<script>
import {defineComponent} from "vue-demi"
import {useStore} from 'vuex'
export default defineComponent({
    setup() {
        let store=useStore();
        let getImageUrl=(user)=>{
            //使用统一资源定位符来访问项目静态图片
            let userImageUrl=new URL(`../assets/img/${user}.jpg`,import.meta.url);
            return userImageUrl.href;
        }
        let handleCollapse=()=>{
            //调用vuex中的mutations
            store.commit("updateIsCollapse");
        }
        return{
            getImageUrl,
            handleCollapse
        };
    }
}) 
</script>

如此我们就实现了这个小功能