Vue系列入门教程（13）-初识vuex

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 582 浏览 2502 个字

摘要 :

一、vuex是什么 1、关于vuex的解释，官方定义如下： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则……

一、vuex是什么

1、关于vuex的解释，官方定义如下：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

官方的解释不是那么好理解，后面潘老师回通过案例来说明，让你更容易理解vuex。

2、vuex官方文档：https://vuex.vuejs.org/zh/

二、什么是“状态管理模式”

我们先看一个简单的计数代码：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；
view，以声明方式将 state 映射到视图；
actions，响应在 view 上的用户输入导致的状态变化。

以下是一个表示“单向数据流”理念的简单示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。

1）对于问题一：传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。
2）对于问题二：我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。
以上的这些模式非常脆弱，通常会导致无法维护的代码。

提示：视图可以理解为模板，即vue实例中的template，状态可以理解为数据，即vue实例中的data，行为可以理解为方法事件，即vue实例中的methods

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

以下是vuex的运行原理图：

三、为什么要用vuex?

1、我们之所以要使用vuex的原因其实就是要解决上面的两个问题。

2、我们知道，使用 vue/react 等框架，需要关注点基本就是数据，因为框架解决了数据和页面更新的实现，页面和数据的关系就是y=f(x)的关系，那么我们需要关注数据(model) 和视图(组件) 之间的关系：

一个组件使用一个 model，一对一的关系
一个组件使用多个 model，一对多的关系
多个组件使用一个 model，多对一的关系
多个组件使用多个 model，多对多的关系

我们发现，组件和数据之间的对应关系，随着项目的复杂，变得混乱，因此需要统一管理数据，把数据的存取集中到一个地方，所有的组件都从这个地方取数据，更新数据也集中到同一个地方，而vuex则解决了这个问题。

3、假如不使用vuex，我们看下关系图：
1）父子组件依赖同一个state

2）兄弟组件依赖同一个state

使用vuex之后，关系图：

4、为了方便记忆和理解，我们来看下vuex实例和vue实例对于关系：

5、案例说明：
假设有这样的两个页面，数据一样，就是页面布局不一样：
1）第一个页面如下-列表展示：

<template>
    <div>
        <ul>
            <li v-for="(item,i) in products" :key="i">
                商品名：{{item.name}},价格:{{item.price}}
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                products:[
                    {name:"小米手机",price:"5000"},
                    {name:"华为手机",price:"6000"},
                    {name:"魅族手机",price:"4000"},
                    {name:"Vivo手机",price:"3000"}
                ]
            }
        }
    }
</script>

<style scoped>

</style>

2）第一个页面如下-表格展示：

<template>
    <div>
        <table>
            <tr>
                <td>商品名</td>
                <td>价格</td>
            </tr>
            <tr v-for="(item,i) in products" :key="i">
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                products:[
                    {name:"小米手机",price:"5000"},
                    {name:"华为手机",price:"6000"},
                    {name:"魅族手机",price:"4000"},
                    {name:"Vivo手机",price:"3000"}
                ]
            }
        }
    }
</script>

<style scoped>
table,td{
    border: solid black 1px;
}
</style>

现在我们可以发现上面两个页面里面的数据是一样的，只不过展示方式不一样，同一份数据，我们在两个页面里面操作两次感觉还行，如果有10个，20个 ……页面都需要用到该数据，那么这就是一件让人崩溃的事情，比如用户登录数据，而且数据的同步刷新也很痛苦。所以就需要vuex了。简言之：vuex就是将数据共享给多个组件共同使用，同时也将这个数据的状态进行了共享（一个组件改变这个数据的状态其它组件也跟着改变）。