8. vue插件

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

image

步骤二：

将下载的文件进行解压，解压完之后，文件内容如下：

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 中。具体用法如下：

安装：

npm install --save vuex-persistoryarn add vuex-persist

引入：

import VuexPersistence from 'vuex-persist'

先创建一个对象并进行配置：

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})

引入进vuex插件：

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})

vue快速上手-3

8. vue插件

9. vuex

9.1 安装Vuex

9.2 创建store

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

9.3 state

9.3.1 如何在组件中获取vuex状态

9.3.2 mapState

9.4 getters

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

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

9.5 mutations

9.5.1 提交载荷(payload)

9.5.2 在组件中提交mutations

9.6 actions

9.6.1 一个简单的action

9.6.2 在组件中分发action

9.6.3 组合actions

9.7 mudules

9.7.1 每个module拥有自己的state, getters, mutation, action

附：项目结构

9.8 Vuex持久化存储之vuex-persist

你可能感兴趣的:(vue快速上手-3)