Vuex简介

什么是Vuex?

Vuex是集中式管理状态的模式(多个组件共同读写同一个数据)

什么时候使用组件?

• 多个视图依赖于同一状态。
• 来自不同视图的行为需要变更同一状态。

Vuex 工作原理图

Vuex有三个重要的组成部分 分别是Actions、mustaions、state 。

1. Actions 用来处理异步操作。比方说 backend API (请求数据) ，也就是说异步操作放在Actions里面进行处理

2. Mutations 是同步操作，也是用来更改state状态的地方。 在这里需要说一句， 更改state状态的操作，统一放在mutations里面。 原因有三 ①mutations是同步操作更适合更改state状态 ② 官网要求的 ③ 在严格模式下不在mutations里面更改状态会报错

3. state 是用来存放数据的地方。 state英文翻译就是状态也就是数据。

在vuex中有两个比较重要的方法。

 1.dispatch:  用于使用Actions里面的方法

  2.commit 用于使用mutations里面的方法 当然在我们的vuex工作原理图中还有一个mutate，这个其实就相当于去更改state数据，在mutations中操作。无法直接使用这个方法。

   也就是相当于只有mutations才能使用mutate，也就是只有在mutations中才能更改state状态。

Map技术的使用

Map英文翻译地图、映射的意思,Map的作用就是 我们在组件中调用vuex中的方法或者获取vuex中的state时，进行简化获取的代码。

 比方说正常情况下获取state数据，需要  this.$store.state.属性名。 而使用map后可以只需要写属属性名就可以了

Map是vuex中的API

 在组件中只需要引入即可 ，一共有四个可以使用的Map 分别是mapState、mapGetter、mapActions、mapMutations。  都是驼峰命名法

 以state为例

  import {mapState} from 'vuex'

  因为state里面存放的都是数据，我们只需要获取获取数据的路径就可以了

 因此我们在计算属性中使用map

  mapState(['sum'])  返回出来的值就是 this.$store.state.sum 就是自动帮我们拼接。mapState里面也可以接受对象。 就相当于把vuex中的数据获取过来直接在重新命名，在组件中使用

 如果你使用vuex模块化，在vuex中有可能会有命名冲突的问题，而你就可以使用对象结构将获取的数据重新命名

 mapState({重新命名Name:'state中的属性名'})

剩下三个Map的使用比较类似，其中的mapActions和mapmutations 有些许差异 因为Actions和mutations里面是方法，用于逻辑处理的，大家可以翻看官方文档

Vuex环境的搭建

  ① 下载Vuex包 npm install Vuex -d  放在生产环境下

  ②  创建一个js文件可以命名为store 引入vue、vuex ， 在main.js  也就是vue入口文件中使用中间件引入vuex

     vue.use(vuex)

    然后将创建的js文中 导入到vue入口文件中,添加至vue实例中.

    vue入口文件

import Vue from 'vue'

import App from './App.vue'

import store from './store'

Vue.config.productionTip = false;

new Vue({

  render: h => h(App),

  store,  

}).$mount('#app');

相当于注册在vue中了， 在vue component 中就可以找到vuex了。

  vue 实例与vue组件的关系，就相当于vue是原型 vue组件相当于是根据原型创建的一个实例。

 在vue中注册vuex，就相当于 vue组件也有了这个方法。

vuex中要讲的部分虽然不是很多，但如果都用文字描述出来的话，工作量还是比较大的。 所以我向使用多个章节讲里面的知识点分别讲述

 一共有以下几个知识点会在后面的章节叙说

 ① vuex环境的搭建

② mapState、mapGetter 的使用

③ mapActions、mapMutations的使用

④vuex模块化以及map如何调用模块中的状态

⑤getter配置项以及plugin插件的使用。