Vuex深入解读(适用于Vue2)

Vuex是Vue官方推出的 一个 状态管理工具，其能生成一个单独的全局状态实例，其有以下特点：

注意事项 ：版本号在362以下的vuex适用于vue2，若在vue2的工程项目中直接 npm i vuex -s 会报如下的错误

解决办法是指定版本号，vue2使用的版本目前最高支持到362，具体可在 更新记录 中进行查阅。

State相对于vuex来说就好比vue组件中的data，所以声明state必须是 纯粹的对象 (含有零个或多个的 key/value 对) ，在建立后，State数据会被转换为响应式的数据。

首先定义一个store，里面只包含State，然后我们将其注入到全局，下面一次进行以上三种形式的测试

1在vue组件中访问

注:由于不能修改store数据，所以一般不建议在data中访问store的数据，因为它没有缓存效果，一般在计算属性中获取state数据。

mapState 语法糖的主要作用是将store中的state映射到当前vue实例的computed中

在没有 mapState 时，我们获取state一般在computed中进行获取，对于获取多个state数据，那么我们就要写多个computed方法，如下

针对于写多个computed的繁琐和冗余，使用 mapState 可以帮助我们生成 计算属性 。

当映射的计算属性的名称与 state 的数据名称相同时，我们也可以给 mapState 传一个字符串数组。

mapState 返回的是一个对象，如果computed只包括 mapState ，那么直接写

如果你的computed还有其它store之外的属性，那么你需要使用剩余运算符，把mapState返回的对象和其它计算属性对象合并

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

Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

两种使用方法：

>

全局状态管理器，可以在项目的任何一个组件中去获取和修改，修改可以得到全局响应的变量

vue-cli2 项目中安装vuex，使用 npm install vuex --save

安装成功后，在src目录下新建一个store文件,里面创建一个js文件

在js文件中写入：

然后在mainjs文件中引入 store 并注册到 vue 实例中

vuex的文件配置到这里就完成了

现在再回去看store文件里的参数，这几个对象就是vuex五大核心：

State ：可全局访问的对象

Getter ：和vue的computed一样，用来实时监听state的值的变化（最新状态）

Mutation ：存放改变state值的方法（同步）

Action ：触发mutations里面的方法（异步）

module ：模块

State是存储在Vuex中的数据对象，和Vue实例中的data一样。只不过State是可以全局访问的。

定义stata对象，直接在 state 里面定义 key:val ，它可以定义任意数据类型

在页面中获取state的值 使用 this$storestate

在这里 state 通常都是挂载到 computed 计算属性上，这样当state的值发生改变的时候都能及时的响应。

当然也能用到 watch 去监听

State中的辅助函数 mapState

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性

输出

Vuex 允许我们在 store 中定义 getter （可以认为是 store 的计算属性）。就像计算属性 computed 一样， getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值( state 中的属性)发生了改变才会被重新计算。

Getter的作用就是用来实时监听state的值的变化

定义Geters对象

使用 state 作为其第一个参数

可以使用其他 getter 函数作为第二个参数

在页面中使用getters，使用 this$storegetters

Getters中的辅助函数 mapGetters

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

输出

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

使用 state 作为第一个参数

使用 this$storecommit('方法名') 触发mutations中的方法

输出

而第二参数官方解释叫 提交载荷（Payload）

可以向 storecommit 传入额外的参数，即 mutation 的 载荷（payload）

简单来说就是可以在在第二参数里传入额外的参数

这里还是用name来做例子

输出

在 Vuex 中，mutation 必须是同步函数

Action 可以包含任意异步 *** 作，Action的作用就是异步触发Mutations

定义action对象

接收一个 context 参数和一个要变化的形参

context 与 store 实例具有相同的方法和属性，所以他可以执行 contextcommit("") ，也可以使用 contextstate 和 contextgetters 来获取 state 和 getters 。

使用 this$storedispatch("方法名") 方法执行Actions

输出

同样Action还支持载荷方法，传入第二形参

输出

其中 module 的作用是可以把 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

主要是为了解决由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

简单来说就是可以把vuex模块化

VueX 是适用于在 Vue 项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步 data 中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此， Vue 为这些被多个组件频繁使用的值提供了一个统一管理的工具—— VueX 。在具有 VueX 的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。

由于 VueX 是在学习 VueCli 后进行的，所以在下文出现的项目的目录请参照 VueCli 2x 构建的目录。

以下步骤的前提是你已经完成了Vue项目构建，并且已转至该项目的文件目录下。

打开mainjs

例如在Appvue中，我们要将state中定义的name拿来在h1标签中显示

或者要在组件方法中使用

注意，请不要在此处更改 state 中的状态的值，后文中将会说明

在Vue项目开发中，需要监控项目中得各种值，为了提高效率，Vue提供了一款浏览器扩展——VueDevtools。

在学习VueX时，更为需要使用该插件。关于该插件的使用可以移步官网，在此不再赘叙。

在VueX对象中，其实不止有 state ,还有用来 *** 作 state 中数据的方法集，以及当我们需要对 state 中的数据需要加工的方法集等等成员。

成员列表：

首先， Vue 组件如果调用某个 VueX 的方法过程中需要向后端请求时或者说出现异步 *** 作时，需要 dispatch VueX中 actions 的方法，以保证数据的同步。可以说， action 的存在就是为了让 mutations 中的方法能在异步 *** 作中起作用。

如果没有异步 *** 作，那么我们就可以直接在组件内提交状态中的 Mutations 中自己编写的方法来达成对 state 成员的 *** 作。注意， 133节 中有提到，不建议在组件中直接对 state 中的成员进行 *** 作，这是因为直接修改(例如： this$storestatename = 'hello' )的话不能被 VueDevtools 所监控到。

最后被修改后的state成员会被渲染到组件的原位置当中去。

mutations 是 *** 作 state 数据的方法的集合，比如对该数据的修改、增加、删除等等。

mutations 方法都有默认的形参：

( [state] [,payload] )

例如，我们编写一个方法，当被执行时，能把下例中的name值修改为 "jack" ,我们只需要这样做

indexjs

而在组件中，我们需要这样去调用这个 mutation ——例如在Appvue的某个 method 中:

在实际生产过程中，会遇到需要在提交某个 mutation 时需要携带一些参数给方法使用。

单个值提交时:

当需要多参提交时，推荐把他们放在一个对象中来提交:

接收挂载的参数：

另一种提交方式

为了配合Vue的响应式数据，我们在Mutations的方法中，应当使用Vue提供的方法来进行 *** 作。如果使用 delete 或者 xxxx = xx 的形式去删或增，则Vue不能对数据进行实时响应。

可以对state中的成员加工后传递给外界

Getters中的方法有两个默认参数

例如

组件中调用

由于直接在 mutation 方法中进行异步 *** 作，将会引起数据失效。所以提供了Actions来专门进行异步 *** 作，最终提交 mutation 方法。

Actions 中的方法有两个默认参数

例如，我们在两秒中后执行 222 节中的 edit 方法

由于 setTimeout 是异步 *** 作，所以需要使用 actions

在组件中调用:

改进:

由于是异步 *** 作，所以我们可以为我们的异步 *** 作封装为一个 Promise 对象

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成 模块（module） 。每个模块拥有自己的 state、mutation、action、getter 、甚至是嵌套子模块——从上至下进行同样方式的分割。

组件内调用模块a的状态：

而提交或者 dispatch 某个方法和以前一样,会自动执行所有模块内的对应 type 的方法：

如果把整个 store 都放在 indexjs 中是不合理的，所以需要拆分。比较合适的目录格式如下：

对应的内容存放在对应的文件中，和以前一样，在 indexjs 中存放并导出 store 。 state 中的数据尽量放在 indexjs 中。而 modules 中的 Astore 局部模块状态如果多的话也可以进行细分。



首页

问答

综合

首页 > 正文

Vuejs动态路由匹配，为什么不能识别路由参数呢

H5W32021-05-05 17:56:01



如上图，想要实现两个菜单选项共用一个页面，通过路由参数来判断功能从而筛选显示不同的内容。

selectMenu:function(key, keyPath){

consolelog(key);

switch(key){

case '1':this$routerpush('/index');break;

case '2-1-1':this$routerpush({path:'/sale/sureList/0',name:'待确认订单'});break;

case '2-1-2':this$routerpush('/logistics/logisticsList/0');break;

case '2-1-3':this$routerpush({path:'/sale/sureList/',name:'订单管理'});break;

default:break;

上面是菜单控制函数，当我选择待确认菜单时，路由成功匹配到路由中的第一项，status =0。但实际上我在surListvue页面获取路由参数失败，报错：[vue-router] missing param for named route "待确认订单": Expected "status" to be defined

导致界面不能正确渲染，还是原来的确认订单界面，如下图所示（有点丑，为了实现效果）。标题的渲染是根据路由参数来判断显示的。



可耐的小伙伴们，求助求助！

///////////////////////////////////////////////////////////////////////////////////

下面是监听路由情况下打印输出的路由及路由参数



回答：

！！$routepus()使用错误

查看$routepush()用法，发现一般有下面的三种用法，而我原来写的那种路径加名字是不合法的。

试着使用第二种和第三种命名法:this$routerpush({name:'待确认订单',params:{status:'0'}})，成功了。：）要么只push路径path，要么push name和参数status确定路由。

(1)字符串

routerpush('home')

(2)// 对象

this$routerpush({path: '/loginurl=' + this$routepath});

(3)// 命名的路由,后面的参数为动态路由的参数

routerpush({ name: 'user', params: { userId: 123 }})

(4)// 带查询参数，变成/backend/orderselected=2

this$routerpush({path: '/backend/order', query: {selected: "2"}});

回答：

首先，selectMenu方法不建议在跳转路由的时候带有中文的name，或者说路由的定义不建议用中文

其次，你想用path:'/sale/sureList/'时，进入订单管理页，但是路由指向的是待确认订单的路由，并且提示status未定义，所以你可以这样定义路由试试

path: '/sale/sureList'

另外，我做过类似的页面，两个路由指向同一个页面，这个时候在进行页面的切换时，并不会重新挂载，所以获取路由名称方式用mounted方法和watch监听方法一起做。

watch: {

'$route': function (route) {

// 监听路由变化

consolelog("router changed");

let routerName = this$routename;

consolelog(routerName);

}

},

mounted(){

let routerName = this$routename;

consolelog(routerName);

///////////////////////////////////////

简单测试url传递参数输出params：

Vue使用Proxy监听所有接口状态的方法实现

在开发项目过程中几乎所有接口都需要知道它的返回状态，比如失败或者成功，在移动端通常后台会返回结果，而我们只需要一个d窗来d出来结果就可以了。但是这个d窗如果在整个项目里需要手动去每一个都定义，那是非常庞大的代码量，而且维护起来非常的麻烦。通常做法就是绑定在原型上一个公共方法，比如thismessage('后台返回接口信息')。 这样看似省力了很多其实还是很麻烦。 如果使用了proxy做一个全局代理，那么就完全不一样了。不管任何一个api都会将状态传递个这个代理中心，并且由代理中心直接反应结果。

        将VueX安装在生产环境依赖中

        npm  install  vuex  --save

     说明：

        1   通过vue实例中的store选项

        2   是为了将store对象挂Vue的原型$store上

        3  这样所有的组件内部就可以使用 this$store 来 *** 作store

             所谓的单一状态树，用一个对象包含应用中全部的状态，这个对象作为唯一数据源而存在。也就是意味着每个应用只包含一个store实例。

             在组件中使用state中的数据

     示例总结：

        1  可以直接修改Vuex中的状态（但不推荐），因为直接修改不利于调试

    1 有的是我们对于store里的state中派生一些状态出来，如：数据的过滤

    2 在获取数据后进行过滤处理，同样的逻辑可能会在不同的地方使用

    3 在Vue中也可以采用计算属性进行处理（计算属性就是会将数据处理进行缓存的）

    4  Vuex提供了一个getter，类似于store中的计算属性，根据依赖状态计算值后返回并缓存起来

    5  只有当getter依赖的状态发生了改变时才会被重新计算

1  Getter的第一个参数为状态state，用于收获Getter的依赖状态

2  Getter的第二个参数

     Getter的第二个参数就是选项Getters，作用是用来获取其他Getter函数

3  通过方法访问

  说明：

     1  通常对于getter的使用方法，都是返回处理完毕后的数据

     2  但是有的时候我们需要处理数据的条件是外部传递过来的，例如示例过滤价格

     3  getter可以返回一个函数，这个函数用来接收外部传递的参数

总结：

    1、getter返回的不是确定的值而是一个函数

     2、那么此时在通过$storegettersfilterFruits获取到的就是一个函数

     3、既然是函数就可以当成方法使用, 传递参数

     4、如 $storegettersfilterFruits(20)

以上就是关于Vuex深入解读(适用于Vue2)全部的内容，包括:Vuex深入解读(适用于Vue2)、Vuex4.x（一）初识vue3的状态管理-state、Vue笔记（Vuex全局状态管理器）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！