在上一章中我们列出了在 Vue 中可以使用但在 中不能使用或者需要特别注意的功能，在实际开发之前还是有必要了解一下的，避免浪费时间寻找错误。

如果你使用过原生的小程序框架，你一定经历过或者思考过如何解决如下问题：

在网上随便搜了一下，通常有很多种解决方法，比如通过app、通过、通过单独的()、通过Page路由栈、通过引入自定义事件、通过引入等等...

在原生的小程序框架中，确实没有统一的方法来指导开发者解决这个问题，大家只能采用自己能够暂时解决当前问题的解决方案。

不过既然我们使用了 Vue/，那么在遇到这种情况的时候，我们自然就会想到一个解决方案，那就是 Vuex。Vuex 是专门为 Vue 应用开发的一种状态管理模式，它使用集中式存储来管理应用所有组件的状态，并使用相应的规则来保证状态以可预测的方式发生变化。

通过使用Vuex，我们可以轻松地统一管理应用、页面、组件之间需要共享的数据，并在各个代码部分更方便、有效地访问这些共享数据，让你的代码更加有条理。

我们知道 Vuex 一般有两种用途。创建后：

经过我的实际测试，上面两种方式在 中也是可以使用的。不过不同于 Vue Web 单页应用的单 Vue 实例结构，它采用的是多 Vue 实例结构（app 和每个页面都会由单独的 Vue 实例进行管理），所以个人更推荐上面提到的第二种方式，更加灵活，也更加简单。

我们开始写代码吧，首先在src目录下新建一个目录，然后在该目录中新建一个名为-.js的文件：

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({     state: {         count: 0   },     mutations: {         increment: (state) => {       state.count += 1     },         decrement: (state) => {       state.count -= 1     }   } });

在这段代码中，我们创建了一个新的实例，管理一个名称为类型的状态，并且定义了两个操作来操作（增加或者减少）这个状态值。

接下来，我们想在 2 个页面中访问它。让我们在 src/ 目录中写入 2 个页面：和。

这是//.vue的代码内容：

       

    进入计数器页面    .navlink {     text-decoration: underline; }

这是//.vue的代码内容：

       -     {{count}}     +    .btns {     display: flex;     align-items: center; } .calnum {     color: red;     font-size: 32px; }

这样，我们就有了两个使用我们定义的页面。这些页面将从中获取状态值并将其显示在页面中，并且将调用两个来更新该值。

运行小程序可以看到初始页面是这样的，且页面显示的结果为0：

然后点击“进入计数器页面”进入该页面，点击此页面上的加号和减号按钮进行操作，显示的数字就会发生变化：

最后点击左上角的返回按钮，返回到页面，你会发现这个页面的结果已经发生了变化，并且自动和上次操作的结果同步了：

概括

通过这个例子，大家是不是感觉使用 Vuex 进行页面间传值、同步数据非常简单呢？另外，还可以根据需要在 src/ 目录下创建多个模块，独立管理不同业务范围的数据，并根据需要引入页面组件。

Vuex 是开发中非常强大的工具，希望大家能够尽快掌握它。更多使用方法请参考官方文档。