vuex入门：直击多组件传参的痛点

前言

在昨天的文章VUE组件化开发初体验，为初学者解析组件传参基础知识 - 掘金 (juejin.cn)之中已经为各位详细解释了在vue组件开发过程中如何实现父子组件传参，但是在实际开发过程中，组件之间的传参远没有那样简简单单，往往会涉及到孙组件与孙组件之间的传参，这个时候如果还是用最原始的v-bind绑定再用props获取这样的方法一级一级传过去的话，那程序员一天到晚光传参就得累个半死。对此，vuex应运而生，其作为一个几乎所有组件都能访问的公共数据，极大程度上减轻的传参的复杂度

正文

我们还是拿着昨天的记事本小demo来举例子，这一次我将head和body部分全部独立为组件的形式，而父组件APP.vue中有且仅有一个title。

当我们在输入框输入之后点击提交按钮，按照最原始的方法是将head的值传给App.vue，再由App.vue传给body去循环出来。之所以这么复杂，根本原因就是head和body之间的数据不互通，而vuex则刚好可以提供一个类似于数据仓库的角色，让所有组件之间的数据全部变成公共的。Vuex是一个用于Vue.js应用程序的状态管理库。它专注于管理应用程序中的共享状态，并提供了一种集中式的状态管理方案，以便更容易跟踪和管理应用程序的状态。Vuex通常用于中大型Vue.js应用程序，特别是那些具有复杂组件层次结构和多个组件之间需要共享状态的情况。

如何使用vuex

开始 | Vuex (vuejs.org)

Vuex作为一个组件，使用前必须要安装的，和vue路由差不多，我们可以在官方文档中看到如何在项目中安装vuex。我这里使用的是npm命令安装的vuex

需要特别注意的地方是，vuex并不仅仅是开发阶段需要使用到，在项目完成上线并给用户使用的时候，vuex依旧需要用到，所以在安装命令的后面需要加上

--save。

前面说了vuex基础的内容用起来和vue路由几乎一样，所以安装完成后我们就需要去配置一下vuex。在src目录下新建一个store文件夹并在文件夹中新建一个index.js文件。接下来就可以在index.js文件中配置vuex了。

配置vuex

js 复制代码

import { createStore } from "vuex";

const store = createStore({

})

export default store

createStore 函数:

· createStore 是 Vuex 提供的用于创建 Vuex store 实例的函数。它是 Vue 3 Composition API 的一部分，与传统的 new Vuex.Store({/ configuration /}) 不同。使用 Composition API，可以更灵活地组织和配置 store。

const store:

store 是通过 createStore 创建的 Vuex store 的实例。这个实例包含了整个应用程序的状态、mutations、actions 等信息。

export default store:

通过 export default 将创建好的 store 导出，这样其他地方的 Vue 组件可以引入并使用这个 store。

使用vuex

接下来我们就需要使用vuex了，首先是在 Vue 应用的主入口文件使用 app.use(store) 来将这个 store 注册到应用中。之后我们就需要看我们到底需要将什么数据塞进这个公共仓库，很明显我们这里需要的是lists中的数据。在vuex配置文件中，createStore函数有多个部分，包括但不限于

js 复制代码

const store = createStore({
  state: {
    // 应用程序的状态
  },
  mutations: {
    // 修改状态的方法
  },
  actions: {
    // 处理异步操作的方法
  },
  getters: {
    // 计算状态的方法
  },
  modules: {
    // 可以将 store 拆分成模块
  }
})

Lists数据显然应该放在state部分，如此一来，在vuex中就有了一个名为lists的数组且是公共的。

js 复制代码

import { createStore } from "vuex";

const store = createStore({
    state() {
        //等同于data，区别在于这个是公共的，所有子组件或孙组件都能用
        return {
            lists: ['html', 'css', 'js', 'vue']
        }
    }

})

export default store

处理vuex中的数据

数据被塞进去之后，剩下的就简单多了，只需要让对应组件能够对vuex中的数据进行操作即可,我们可以在vuex的配置文件中加入mutations，这样我们就可以在里面写函数去操作vuex里面的数据了，随后将这个方法引入到Head中并让head中的提交按钮绑定点击事件

js 复制代码

    mutations: {
        //methods,可以获取到state里面的数据,这个方法可以接受两个形参，第一个是内定好的，叫啥都是state，第二个就是自己传进去的值
        listsAdd(state, val) {
            state.lists.push(val)
        }
    }

需要注意的是，mutations中可能还有其他的函数，所以我们在子组件的methods中使用mutations中的函数时应该先解构，再拿到需要的函数名

js 复制代码

//Head.vue
...mapMutations(['listsAdd'])

最后再用body组件绑定vuex中的lists就可以循环输出lists的内容了。

js 复制代码

//body.vue
 computed: mapState(['lists'])//从公共仓库里面把lists取出来

总结

如果是小型demo的组件传参用传统的方法或许够用，但在大型项目之中，组件和参数都数量庞大的情况下我们还是应该去使用类似于vuex或者pinia之类的工具去减轻负担。 Vuex 是什么？ | Vuex (vuejs.org)