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

在mutation的state的自定义set change方法的时候 根据使用场景的不同

储存到Session Storage和Local Storage或者其他本地储存中

把对应state的初始化改成从本地储存中获取

另外本地储存 如果是存储JSON字符串 一定要做好相应的容错处理

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 局部模块状态如果多的话也可以进行细分。

以上就是关于vue第八节全部的内容，包括:vue第八节、获取vuex state 中的值一定要使用 computed 而不能使用 data 吗、VueX（Vue状态管理模式)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！