Vue：vuex

一、vuex概述

1、vue插件

vuex 是实现数据集中式状态管理的插件。数据由 vuex 统一管理。其它组件都去使用 vuex 中的数据。只要有其中一个组件去修改了这个共享的数据，其它组件会同步更新。

2、全局事件总线和 vuex 插件的区别

全局事件总线关注点：组件和组件之间数据如何传递，一个绑定$on，一个触发$emit。数据实际上还是 在局部的组件当中，并没有真正的让数据共享。只是数据传来传去。

vuex 插件的关注点：共享数据本身就在 vuex 上。其中任何一个组件去操作这个数据，其它组件都会同步更新。是真正意义的数据共享。

 

 3、vuex的使用场景

多个组件之间依赖于同一状态。来自不同组件的行为需要变更同一状态。

4、搭建vuex环境 

①安装vuex：

vue2：npm i vuex@3       vue3： npm i vuex@4

②创建目录和 js 文件

③创建store.js文件

//引入vue
import Vue from 'vue'
//引入vuex插件
import Vuex from 'vuex';
//使用插件
Vue.use(Vuex)
//创建三个核心对象
const actions = {}
const mutations = {}
const state = {}
// 创建store对象, 管理三个核心对象
const store = new Vue({
    //负责执行某个行为的对象
    actions: actions,
    //负责更新的对象
    mutations: mutations,
    //状态对象
    state: state
})
//导出store
export default store
//简写形式
// export default new Vuex.Store({ actions, mutations, state })

④在main.js里面导入store.js文件，完成之后所有的 vm 和 vc 对象上会多一个$store 属性

通过vm.$store或者vc.$store来获取store对象

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
//引入store
import store from "./vuex/store"
new Vue({
  el: '#app',
  store: store,
  render: h => h(App)
})

二、vuex真实场景

1、App.vue

<template>
  <div>
    <h1>数字：{{ $store.state.num }}</h1>
    <button @click="plusOne">点击加1</button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    plusOne() {
      // this.$store.state.num++;
      this.$store.dispatch("plusOne", this.counter);
    },
  },
};
</script>

methods里面的函数

业务逻辑复杂，代码比较多，如果你将这些代码放到这里的话，这些业务逻辑代码无法得到复用。

无法在其他组件中使用，在其他组件中使用的时候，你还需要把这些代码再写一遍。

调用vuex的API。dispatch是vuex的API。调用这个方法之后，store对象中的plusOne这个action回调函数会被自动调用。

2、store.js

//引入vue
import Vue from 'vue'
//引入vuex插件
import Vuex from 'vuex';
//使用插件
Vue.use(Vuex)
//创建三个核心对象
const actions = {
    plusOne(context, val) {
        val = val + 1
        context.commit("PLUS_ONE", val)
    }
}
const mutations = {
    PLUS_ONE(state, val) {
        state.num += val
    }
}
const state = {
    num: 0
}
// 创建store对象, 管理三个核心对象
// const store = new Vue({
//     //负责执行某个行为的对象
//     actions: actions,
//     //负责更新的对象
//     mutations: mutations,
//     //状态对象
//     state: state
// })
// //导出store
// export default store
//简写形式
export default new Vuex.Store({ actions, mutations, state })

actions对象(负责执行某个行为的对象)

有N多个action，每一个action都是一个回调函数、在action这种回调函数中编写复杂的业务逻辑。

原则：action是专门用来处理业务逻辑，或者说发送AJAX请求的。

context参数：context是vuex的上下文，value参数：传过来的数据。 

 如果业务逻辑非常负责，需要多个 actions 中的方法联合起来才能完成，可以在回调函数中使用

context 继续调用 dispatch 方法触发下一个 action 方法的执行。 

mutations对象(负责更新的对象)

存在N多个mutation，每一个mutation都是一个回调函数，回调函数的作用是：更新state。

只要state一更新，因为是响应式的，所以页面就重新渲染了。

state参数：状态对象， value参数：上一环节传过来的数据。

state对象(状态对象)

等同于Vue当中的data（叫做状态），状态对象（数据对象），已经做了响应式处理的。

3、main.js

首先要引入store.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 引入Vuex插件中的核心对象store
import store from './vuex/store'
new Vue({
  el : '#app',
  // 一个全新的配置项，以前没有学过：store
  // 加上这个配置项之后，vm以及所有的vc对象上都会多一个属性：$store
  // 以后通过vm.$store或者vc.$store来获取store对象。
  //store : store,
  store,
  render : h => h(App),
})

new Vue里面的配置项

加上store : store，这个配置项之后，vm以及所有的vc对象上都会多一个属性：$store

以后通过vm.$store或者vc.$store来获取store对象。

4、getters配置项

const getters = {
    reversedName(state){ 
        return state.username.split('').reverse().join('')
    }
}

<template>
  <div>
    <h3>反转的用户名：{{ $store.getters.reversedName }}</h3>
  </div>
</template>

有很多getter，每一个getter可以看做一个计算属性，每一个getter方法都会自动接收一个state对象

类似于 Vue 当中的：data 和 computed 的关系。 

四、代码的简单优化

1、mapState 和 mapGetters 的使用（优化计算属性） 

①使用 mapState 和 mapGetters 进行名称映射，可以简化代码。

②使用 mapState 和 mapGetters 的前提是先引入

 import {mapState, mapGetters} from 'vuex'

③mapState 如何使用，在 computed 当中使用 ES6 的语法

对象形式

...mapState({name:'name'})

数组形式

...mapState(['name'])

插值语法就可以修改为：{{name}}

④mapGetters 如何使用，在 computed 当中使用 ES6 的语法

对象形式

...mapGetters({reverseName:'reverseName'})

数组形式

...mapGetters([‘reverseName’])

插值语法就可以修改为： {{reverseName}}

2、 mapMutations 和 mapActions 的使用（优化 methods）

import {mapMutations, mapActions} from 'vuex' methods : {
    // 对象写法
    ...mapActions({add:'plusOne',reverseName:'reverseName'})
    // 数组写法（前提是：保证 methods 中的方法名和 actions 中的方法名一致）
    ...mapActions(['plusOne', 'reverseName'])
}