vue第八节

Vuex是vue官方的一款状态管理工具，什么是状态呢？我们在前端开发中有一个概念：数据驱动，页面中任意的显示不同，都应该有一条数据来控制，而这条数据又叫做state，状态。

在vue中。组件间进行数据传递、通信很频繁，而父子组件和非父子组件的通信功能也比较完善，但是，唯一困难的就是多组件间的数据共享，这个问题由vuex来处理

vue提供的一个全局的状态管理工具，主要处理项目中多组件间状态共享

因为在组件中可以通过this storestate来使用state中管理的数据

但是我们发现，这样使用的话，当state的数据更改的时候，vue组件并不会重新渲染

也就是说，如果想要在组件中响应式的使用的时候，我们需要通过计算属性（computed）来使用

这样的写法很无趣，而且如果使用的状态较多会产生冗余的感觉，所以vuex提供了mapState辅助函数，帮助我们在组件中获取并使用vuex的store中保存的状态

所以我们可以这样写：

但是如果组件中已经有了num这个数据了，而state中的数据名字也叫num就会照成冲突，这个时候我们可以在组件使用state的时候，给状态起个别名：

但是，有的时候我们在组件中还有自己的业务逻辑需要用到计算属性：

有的时候，我们需要根据state中的某一个状态派生出一个新的状态，例如，我们state中有一个num，在某些组件中需要用到是num的二倍的一个状态，我们就可以通过getters来创建

创建了之后，在组件中通过this$storegettersdoubleNum来获取里面的数据

当然vuex也提供了mapGetters辅助函数来帮助我们在组件中使用getters里的状态，且，使用的方法和mapState一模一样

我们不能直接在组件中更改state：this$storestatenum=2,而是需要使用mutations来更改，mutations也是一个纯对象，里面包含很多更改state 的方法，这些方法的形参接收到state，在函数体里更改，这时，组件用到的数据也会更改，实现响应式。

但是我们也不能直接调用mutations 的方法，需要使用this$storecommit来调用，第一个参数为调用的方法名，第二げ参数为传递参数

vuex提供了mapMutations方法来帮助我们在组件中调用mutations 的方法,使用方法和mapState、mapGetters一样

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步 *** 作。

也就是说，如果有这样的需求：在一个异步处理之后，更改状态，我们在组件中应该先调用actions，来进行异步动作，然后由actions调用mutation来更改数据

如上，actions的方法中可以进行异步的动作，且形参会接收store，从中取出commit方法用以调用mutations的方法

在组件中通过this$storedispatch方法调用actions的方法

当然也可以使用mapMutations来辅助使用

组件使用数据且通过异步动作更改数据的一系列事情：

1生成store,设置state

2在根实例中注入store

3组件通过计算属性或者mapState来使用状态

4用户产生 *** 作，调用actions的方法，然后进行异步动作

5异步动作之后，通过commit调用mutations的方法

6mutations方法被调用后，更改state

7state中的数据更新之后，计算属性重新执行来更改在页面中使用的状态

8组件状态被更改创建新的虚拟dom

9组件的模板更新之后重新渲染在dom中

vuex的使用：

目前市场上有两种使用vuex的情况，

第一种：将需要共享、需要管理的状态放入vuex中管理，也就是说在必要时使用

第二种：将所有的数据都交由vuex管理，由vuex来承担更多的责任，组件变得更轻量级，视图层更轻

在实现回到顶部功能的时候，我们写了一个backTop组件，接下来需要通过监听windowscroll事件来控制这个组件显示隐藏

写了一个v-back-top指令，就是将回到顶部功能做成一个指令，哪个组件或者dom需要使用到回到顶部，就加上这个指令就可以，设置不同的参数来控制在不同的情况下触发

组件库就是通用组件的集合

pc：element-ui iview

mobile： mint-ui

当我们在使用一些插件的时候，经常需要在dom更新完成后进行必要 *** 作，但是在vue中提供的api只有updated钩子函数，而在这个函数里，任意数据的变化导致的dom更新完成都会触发，所以很可能会造成无关数据的影响，而使用监听的话只能监听到数据的变化，此时dom还没有更新，我们只能强行使用setTimeout来处理

这里推荐大家使用nextTick全局方法：

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

v-for='n in 10' n会打印1-10

通用：beforeCreate/created/beforeMount/mounted/beforeUpdate/updated/beforeDestroy/destroyed

路由守卫：beforeRouteEnter/beforeRouteUpdate (22 新增)/beforeRouteLeave

v-if是真正的条件渲染，会确保在切换中条件块内的事件监听、子组件都会适当的被销毁和重建

v-show总是将节点渲染在dom中，只是基于css：display来控制节点的显示和隐藏

v-if有更高的切换开始，v-show有更高的初始渲染开销

v-if是惰性的，初始条件为假，就不会渲染

axios请求的时候不会带上cookie，不会影响带宽，可以通过withCredentials：true来设置

对axios 的请求头进行设置：

axiosdefaultsheaders = {'Content-Type':''}

vue20不在更新维护vue-resource，官方推荐使用axios

6为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发 (即 Angular 用户熟知的“transclusion”)。Vuejs 实现了一个内容分发 API，参照了当前 Web Components 规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。

全局：Vuecomponent(name,Vueextend({}))

局部：{ components:{name:Vueextend({})} }

假设我们有一个数据为num，还希望拥有一个数据为doublenum，而且希望doublenum的值永远都是num的二倍

方法：

prop是单向绑定的，父组件属性变化，传递给子组件，但是，子组件数据变化，不能直接传递给父组件，也就是数据的流行是从父组件流向子组件的，为了防止子组件修改父组件的数据（会让应用的数据流变的更难开发、更新、维护）

使用了vuex工具的时候，store中数据在组件中使用的过程也是单向数据流，state->vue component->actions->mutations->state->vue component

当数据改变之后，vue会创建新的虚拟dom来和原来的虚拟dom做对比，在创建新的虚拟的dom的时候，会根据key来查找在原来的虚拟dom中有没有某个部分，如果原来的有，这次的也需要，就会实现复用，而且在做diff对比的时候，如果有key会加快对比的查找速度，提高性能

尽量循环的时候不要将key设置为数组的索引，因为当删除某一个元素的时候，就会导致删除位置下面的所有元素的key值都与上一次虚拟dom的key值不同，导致复用失败，这个时候我们最好使用关键的唯一的，例如id这样的数据作为key

如果数据变化只是值的变化而不是条数和位置的变化，可以使用索引作为key

Vueuse会查找插件对象里的install方法去执行,并且给install方法里传入Vue对象

很多情况下，一个应用会有PC和移动端两个版本，而这两个版本因为差别大，内容多，所以不能用响应式开发但是单独开发，而域名只有一个，用户进入域后直接返回对应设备的应用，做法主要有两种：

vue-persisitedstate用法

第一步，安装：npm install save vuex-persistedstatee

第二步，示例代码，

第三步，定制持久化的state路径，简化存储的内容从api我们能看到有一个选项是paths，比如，我们在做网页的时候，通常会记录用户的搜索记录，以便后面自动推荐。或者是用户刷新页面了，也可以存储到以往的搜索历史，如果仅仅只是放在vuex中，刷新就会丢失数据了。如果自己手工去维护数据到localStorage又比较繁琐。我们就可以定制化一些参数，比如将查询相关的vuex状态都归类到search里面，就可以使用以下配置，简化vuex持久化的数据。

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

如果一份数据需要在多个组件中使用，组件间传值又比较复杂，就可以使用vuex托管数据。

state选项： 定义状态（状态就是数据）。

mutations选项： 定义修改状态的方法（注意：这里面只能定义同步方法）。

$store： 返回的是当前项目中的全局状态对象。

commit()方法： 用于执行指定的mutations里面的方法。

在组件中，直接通过$storestate就可以获取到全局状态对象管理的状态数据，直接渲染到页面。

state选项： 定义状态（状态就是数据）。

通过 $storestate数据名 使用。

getters选项： 定义计算属性。方法的参数是状态对象。

通过 $storegetters属性名 使用计算属性。

mutations选项： 定义修改状态的方法（注意：这里的方法一般都是同步方法）。方法的第一个参数是状态对象，第二个参数是新值。

通过 commit() 方法，调用mutations里面的方法。

actions选项： 定义 *** 作状态的方法（这里的方法可以定义异步方法）。

注意： actions里的方法最好不要直接 *** 作state状态，而是通过调用mutations里面的方法去修改状态。所以，actions直接 *** 作的是mutations。

通过 dispatch() 方法，调用actions里面定义的方法。

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

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

namespaced属性： 默认情况下，action、mutation 和 getter 是注册在全局命名空间的。通过设置namespaced属性为true，将action、mutation 和 getter全部注册到私有命名空间中。

要从私有模块中获取数据，方式是： $storestate模块名称模块的数据 。

要从私有模块中获取计算属性，方式是： $storegetters['模块名/计算属性'] 。

调用私有模块里面的mutations定义的方法，方式是： $storecommit('模块名/方法名',新值) 。

调用私有模块里面的actions定义的方法，方式是： $storedispatch('模块名/方法名',新值) 。

直接在模板中使用全局状态管理数据，表达式会写的很长。所以可以使用计算属性。

通过映射函数mapState、mapGetters、mapActions、mapMutations，可以将vuexstore中的属性映射到vue实例身上，这样在vue实例中就能访问vuexstore中的属性了，便于 *** 作vuexstore。

如果vuex里面state的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapState 映射函数，自动生成页面中的计算属性。

如果vuex里面getters的数据名称 跟 页面中的计算属性名称相同，就可以使用 mapGetters 映射函数，自动生成页面中的计算属性。

注意： 如果要映射模块里面的state/getters，函数的第一个参数设置为模块的名称。

如果定义的方法名跟全局管理对象中mutations里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapMutations 映射函数生成方法。

如果定义的方法名跟全局管理对象中actions里面的方法名相同，并且定义的方法会带有一个参数，通过参数传递数据。满足该规则，就可以使用 mapActions 映射函数生成方法。

注意： 如果要映射私有模块中mutations/actions里面的方法，函数的第一个参数设置为模块的名称。

1 什么是vue的计算属性computed

计算属性是需要复杂的逻辑，可以用方法method代替

2vue-cli提供的几种脚手架模板

vue-cli 的脚手架项目模板有browserify 和 webpack；

3组件中传递数据？

4 vue-router实现路由懒加载（ 动态加载路由 ）

5 vue-router 的导航钩子,主要用来作用是拦截导航,让他完成跳转或取消

6 完整的 vue-router 导航解析流程

7 vue-router如何响应 路由参数 的变化？

原来的组件实例会被复用。这也意味着组件的生命周期钩子不会再被调用。你可以简单地 watch (监测变化) $route 对象：

8vue-router的几种实例方法以及参数传递

name传递

to来传递

采用url传参

9 is的用法（用于动态组件且基于 DOM 内模板的限制来工作。）

is用来动态切换组件，DOM模板解析

<table><tris="my-row"></tr> </table>

10vuex是什么？怎么使用？哪种功能场景使用它？

是什么：vue框架中状态管理:有五种，分别是 State、 Getter、Mutation 、Action、 Module

使用：新建一个目录store，

场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

vuex的State特性

A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data

B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新

C、它通过mapState把全局的state和getters映射到当前组件的computed计算属性中

vuex的Getter特性

A、getters可以对State进行计算 *** 作，它就是Store的计算属性

B、虽然在组件内也可以做计算属性，但是getters可以在多组件之间复用

C、如果一个状态只在一个组件内使用，是可以不用getters

vuex的Mutation特性

改变store中state状态的唯一方法就是提交mutation，就很类似事件。每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：storecommit。

Action类似于mutation，不同在于：Action提交的是mutation，而不是直接变更状态；Action可以包含任意异步 *** 作，Action函数接受一个与store实例具有相同方法和属性的context对象，因此你可以调用contextcommit提交一个mutation，或者通过contextstate和contextgetters来获取state和getters。Action通过storedispatch方法触发：eg。storedispatch('increment')

vuex的module特性Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，每个模块中拥有自己的state、mutation、action和getter

在vue 中，只有mutation 才能改变state mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state 所谓的类型其实就是名字，action去commit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字，commit mutation 之后， 要做什么事情，那就需要给它指定一个处理函数， 类型(名字) + 处理函数就构成了mutation 现在testjs添加mutation。

Vue 建议我们mutation 类型用大写常量表示，修改一下，把mutation 类型改为大写

action去commit mutations, 所以还要定义action testjs 里面添加actions

action 和mutions 的定义方法是类似的，我们要dispatch 一个action, 所以actions 肯定有一个名字，dispatch action 之后它要做事情，就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context, 它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 contextstate 就会获取到 state 属性， contextcommit 就会执行commit命令。

其实actions 还可以简写一下， 因为函数的参数是一个对象，函数中用的是对象中一个方法，我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions

现在就剩下dispatch action 了。什么时候dispatch action 呢？ 只有当我们点击按钮的时候 给按钮添加click 事件,在click 事件处理函数的中dispatch action

这个时候我们需要新建一个 *** 作组件，我们暂且命名为testvue

然后，我们在methods里面获取这两个 *** 作事件

当然上面这种写法比较麻烦，vuex还给我我们提供了mapActions这个函数，它和mapState 是一样的，把我们的 action 直接映射到store 里面的action中。

如果事件处理函数名字和action的名字不同，给mapActions

提供一个对象，对象的属性是事件处理函数名字, 属性值是 对应的dispatch 的action 的名字。

这时候我们单击按钮，就可以看到count 发生变化。

最后附一张简单的图形解析，看起来应该能更直观一点

1vuex的优缺点

2vuex的使用

先上目录结构：

​

项目中想要管理的数据和状态都在这

连接actions和mutations的桥梁（ *** 作数据的指令）

处理数据， *** 作状态，获取数据都在这，同步去处理数据对应的调用方法 commit

要改变数据时直接用this$storecommit(SET_LOGIN_MSG, loginMsg)即可

对于一些接口数据，可能需要在组件内异步得去处理一些事情，这时候就需要写在这里，对应的调用方法是dispatch，需要注意的是：它提交的是mutation，不做数据和状态的更改，这些 *** 作在mutations中处理

这里的参数 context 是对象{commit, state},后一个参数是你需要传的数据

对应的在组件内调用方法

由于是异步得所有可以用promise封装使用，解决callhack

以上方法就可以完成vuex的整个状态管理了，完全没有任何问题。但有时候会有一些需求，比如变量name需要在firstName和lastName其中任何一个发生变化时同时发生变化，如果在组件内我们使用computed就能做到，在vuex需要我们的getters登场

Module

到这就完了吗？并没有。如果是大型项目，你会发现需要使用vuex的数据太多了，然而把所有的数据处理全部放在 mutationsjs文件中显得很杂乱，并不利于查找与管理，此时我们就需要Module,分模块管理。怎么做呢？

mod1和mod2就是 被分成的两个子模块。因为每个子模块数据和状态不会太多，因此我们把state，mutations，actions，getter写在一个文件中如下

mod1js

mod2js也是如此

那么如何调用呢？

更新数据的方法会有所变化吗？依然按照原来的方法使用就行了

总结：

将store进行拆分，有利于我们更好的管理项目中的状态，以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

3vuex的注意点

a在以往我们更新数据时为了防止数据随时变化所以会在更新组件时及时更新数据，甚至每隔一段时间更新数据，有了vuex就无需这么做了，我们只要在我们更改数据时更新一下数据即可。如用户的基本信息，我们只在用户对用户信息进行修改或增加时更新即可，这样在任何组件中使用用户信息时数据都是最新的。

b使用vuex我们在组件内更改数据是无效的。例如：this$storestatename=‘小明‘，这么做会报错。

以上就是关于vue第八节全部的内容，包括:vue第八节、vue-persisitedstate用法、Vuex简单使用等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！