vue快速上手-3 vue快速上手-3

8. vue插件什么是Vue-Devtools？
官方的说法是它允许你在一个更友好的界面中审查和调试 Vue 应用。在网上查了没有太明确的说法。说白了就是帮助前端开发vue的一个应用，在Components你可以更好的看到组件信息变量和方法，在vuex中你可以查看到state,mutations,actions, getters等。在Events中你能看到你的所有事件方法。下面我们来学习下怎么安装它。
步骤一：访问该地址：vue调试工具插件，下载vue调试工具插件。直接点击推荐下载，相关文件就会下载下来。

文章图片
image
步骤二：
【vue快速上手-3】将下载的文件进行解压，解压完之后，文件内容如下：

文章图片
image 打开谷歌浏览器，点击右上角 ==》选择更多工具按钮 ==》选择扩展程序
然后将之前解压的Vue.js Devtools_5.3.3_chrome.zzzmh.cn.crx文件拖拽到扩展程序界面，按照对应提示点击确认即可。
9. vuex VueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果不打算开发大型单页应用，应用够简单，最好不要使用 Vuex。一个简单的 store 模式就足够了。但是，如果需要构建一个中大型单页应用，就要考虑如何更好地在组件外部管理状态，Vuex 是不错的选择。
9.1 安装Vuex

npm install vuex --save

为了项目格式便于维护和相对规范一点，我们先在目录下建立一个 store 文件夹，并且在下面建立一个 store.js 文件

文章图片
image 9.2 创建store

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 } }) export default store

store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：
1.state – 存放状态
2.getters – state的计算属性
3.mutations – 更改状态的逻辑，同步操作
4.actions – 提交mutation，异步操作
5.mudules – 将store模块化
关于store，需要先记住两点：

store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；
不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

9.2.1 一个完整的store的结构是这样的

const store = new Vuex.Store({ state: { // 存放状态 }, getters: { // state的计算属性 }, mutations: { // 更改state中状态的逻辑，同步操作 }, actions: { // 提交mutation，异步操作 }, // 如果将store分成一个个的模块的话，则需要用到modules。 //然后在每一个module中写state, getters, mutations, actions等。 modules: { a: moduleA, b: moduleB, // ... } });

9.3 state state上存放的，说的简单一些就是变量，也就是所谓的状态。没有使用 state 的时候，我们都是直接在 data 中进行初始化的，但是有了 state 之后，我们就把 data 上的数据转移到 state 上去了。另外有些状态是组件私有的状态，称为组件的局部状态，我们不需要把这部分状态放在store中去。
9.3.1 如何在组件中获取vuex状态
由于vuex的状态是响应式的，所以从store中读取状态的的方法是在组件的计算属性中返回某个状态。

import store from 'store'; const Counter = { template: `{{ count }}`, computed: { count () {// 获取store中的状态 return store.state.count; } } }

这样，组件中的状态就与store中的状态关联起来了。每当store.state.count发生变化时，都会重新求取计算属性，从而更新DOM。
然而，每个组件中都需要反复倒入store。可以将store注入到vue实例对象中去，这样每一个子组件中都可以直接获取store中的状态，而不需要反复的倒入store了。

const app = new Vue({ el: '#app',// 把 store 对象注入到了store, components: { Counter }, template: `` });

这样可以在子组件中使用this.$store.state.count访问到state里面的count这个状态

const Counter = { template: `{{ count }}`, computed: { count () {// 获取store中的状态 return this.$store.state.count; } } }

9.3.2 mapState

推荐使用展开运算符：
mapState 等四个函数返回的都是一个对象。通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是有了对象展开运算符，我们就可以进行简化写法。
当一个组件获取多种状态的时候，则在计算属性中要写多个函数。为了方便，可以使用mapState辅助函数来帮我们生成计算属性。

import { mapState } from'vuex'; export default { // ... data (){ localState: 1 } computed: mapState({ // 此处的state即为store里面的state count: state => state.count, //'count'等同于 ‘state => state.count’ countAlias: 'count', countPlus (state){ // 使用普通函数是为了保证this指向组件对象 return state.count + this.localState; } }) } //上面是通过mapState的对象来赋值的，还可以通过mapState的数组来赋值 computed: mapState(['count']); //这种方式很简洁，但是组件中的state的名称就跟store中映射过来的同名

对象扩展运算符
mapState 函数返回的是一个对象，为了将它里面的计算属性与组件本身的局部计算属性组合起来，需要用到对象扩展运算符。

computed: { ...mapState ({}) }

这样，mapState中的计算属性就与localState计算属性混合一起了。
9.4 getters 有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。此时可以用到getters，getters可以看作是store的计算属性，其参数为state。

const store = new Vuex.Store({ state: { todos: [ {id: 1, text: 'reading', done: true}, {id: 2, text: 'playBastketball', done: false} ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done); } } });

9.4.1 获取getters里面的状态，方法一

store.getters.doneTodos //[{ id: 1, text: 'reading', done: true }] //在组件中，则要写在计算属性中， computed: { doneTodos () { return this.$store.getters.doneTodos; } }

9.4.2 使用mapGetters获取getters里面的状态：方法二

import {mapState, mapGetters} from 'vuex'; computed: { ...mapState(['increment']), ...mapGetters(['doneTodos']) }

9.5 mutations mutations里面是如何更改state中状态的逻辑。更改Vuex中的state的唯一方法是，提交mutation，即store.commit(‘increment’)。
9.5.1 提交载荷(payload)
可以向commit传入额外的参数，即mutation的载荷。

mutations: { increment(state, n){ state.count += n; } } store.commit('increment', 10);

payload还可以是一个对象。

mutations: { increment(state, payload) state.count += payload.amount; } } store.commit('increment', {amount: 10});

还可以使用type属性来提交mutation。

store.commit({ type: 'increment', amount: 10 }); // mutations保持不变 mutations: { increment(state, payload){ state.count += payload.amount; } }

注意：mutation必须是同步函数，不能是异步的，这是为了调试的方便。
9.5.2 在组件中提交mutations
那么mutation应该在哪里提交呢？因为js是基于事件驱动的，所以改变状态的逻辑肯定是由事件来驱动的，所以store.commit(‘increment’)是在组件的methods中来执行的。
方法1: 在组件的methods中提交

methods: { increment(){ this.$store.commit('increment'); } }

方法2: 使用mapMutations
用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

import { mapMutations} from 'vuex'; export default { // ... methods: { ...mapMutaions([ 'increment' // 映射 this.increment() 为 this.$store.commit('increment') ]), ...mapMutaions([ add: 'increment' // 映射 this.add() 为 this.$store.commit('increment') ]) } } // 因为mutation相当于一个method，所以在组件中，可以这样来使用

9.6 actions 因为mutations中只能是同步操作，但是在实际的项目中，会有异步操作，那么actions就是为了异步操作而设置的。这样，就变成了在action中去提交mutation，然后在组件的methods中去提交action。只是提交actions的时候使用的是dispatch函数，而mutations则是用commit函数。
9.6.1 一个简单的action

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state){ state.count++; } }, actions: { increment(context){ context.commit('increment'); } /* 可以用参数结构的方法来写action increment({commit}){ commit('increment'); } */ } }); // action函数接受一个context参数，这个context具有与store实例相同的方法和属性。 // 分发action store.dispatch('increment');

action同样支持payload和对象方式来分发，格式跟commit是一样的，不再赘述。
9.6.2 在组件中分发action
方法1: 在组件的methods中，使用this.$store.dispatch(‘increment’)。
方法2: 使用mapActions，跟mapMutations是类似的。

import { mapActions } from 'vuex' export default { // ... methods: { ...mapActions([ 'increment' // 映射 this.increment() 为 this.$store.dispatch('increment') ]), ...mapActions({ add: 'increment' // 映射 this.add() 为 this.$store.dispatch('increment') }) } } // 同样在组件中，可以这样来使用

9.6.3 组合actions
因为action是异步的，那么我们需要知道这个异步函数什么时候结束，以及等到其执行后，会利用某个action的结果。这个可以使用promise来实现。在一个action中返回一个promise，然后使用then()回调函数来处理这个action返回的结果。

actions:{ actionA({commit}){ return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation'); resolve(); },1000); }) } } // 这样就可以操作actionA返回的结果了 store.dispatch('actionA').then(() => { // dosomething ... }); // 也可以在另一个action中使用actionA的结果 actions: { // ... actionB({ dispatch, commit }){ return dispatch('actionA').then(() => { commit('someOtherMutation'); }) } }

9.7 mudules module是为了将store拆分后的一个个小模块，这么做的目的是因为当store很大的时候，分成模块的话，方便管理。
9.7.1 每个module拥有自己的state, getters, mutation, action

const moduleA = { state: {...}, getters: {...}, mutations: {....}, actions: {...} } const moduleB = { state: {...}, getters: {...}, mutations: {....}, actions: {...} } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }); store.state.a // 获取moduleA的状态 store.state.b // 获取moduleB的状态

附：项目结构 Vuex 不限制代码结构。但是规定了一些需要遵守的规则：

应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。
异步逻辑都应该封装到 action 里面。

只要你遵守以上规则，如何组织代码随你便。如果 store 文件太大，只需将 action、mutation 和 getter 分割到单独的文件。
对于大型应用，我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例：

文章图片
项目结构示例 9.8 Vuex持久化存储之vuex-persist Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。
引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下：
安装：