vuex

一、vuex

1、简介

（1）参考文档
　　https://vuex.vuejs.org/zh/
（2）vuex指的是一种状态管理模式，集中式管理所有组件的状态。可以将其理解为一个数据仓库，用来集中式存储管理数据。
（3）单向数据流
　　State：指的就是状态
　　View：以声明的方式将 state 映射到视图（比如 {{msg}}）。
　　Actions：指的就是响应动作。
　　简单的理解就是， view 映射 state 到 视图上， 状态发生变化时，触发 Actions，Actions执行完后，更新 state。

2、为什么出现vuex

　　没使用vuex前，组件间通信处理比较麻烦。
　　如下图，五个组件，D是B的子组件，E是C的子组件，B、C是A的子组件。现需要D和E组件间传递数据，则需要通过A、B、C三个组件来进行中转，如果出现更多的组件嵌套，那么逻辑可能会很复杂。

　　如果可以将这个数据放在某个特定的地方，需要用的时候直接去拿，不用通过组件的嵌套传值获得，那么会很方便，可以理解vuex就是为了解决这个问题而诞生的。

3、什么时候使用vuex

（1）小型应用不建议使用，使用的话可能会比较繁琐。
（2）中型、大型单页应用，推荐使用，可以更好地管理组件状态。

二、vuex相关概念

1、State

（1）指的是vuex管理的状态对象。
（2）应该是唯一的。

【形如：】
state ： {
    xxx : initValue    // 某个数据的状态
}

2、Mutations

（1）指的是vuex更新state的动作。
（2）包含多个直接更新 state 的方法（回调方法） 的 对象。只能包含同步方法。

【形如：】
  mutations: {
    xxx(state) {
      // 变更状态
      state.xxx
    }
  }

3、Actions

（1）类似于 Mutations，只是Actions 提交的是 Mutation，而不是直接更新 state。其可以包含异步操作。

【形如：】
actions: {
    xxx(context) {
      commit('xxx')
    }
  }

4、Getter

（1）可以理解为计算属性。getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

【形如：】
getters: {
    xxx: state => {
      return state.xxx
    }
  }

5、使用

（1）安装vuex

npm install vuex --save

（2）引入并映射store

import vuex from 'vuex'
import store from './store'

Vue.use(vuex)

 new Vue({
     store
 }) 

（3）声明一个 Store对象。里面需要包含上述几个属性。

【形如：】
const store = new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  }
})

三、实例分析

1、普通的vue项目

（1）功能需求：实现一个简单的加减数的功能。如下图：四个按钮，
　　“+”表示 加1， "-"表示 减1，
　　"oddAdd"表示只在奇数时加1，"asyncAdd"表示异步的加1（延迟1秒）。

（2）代码实现
目录结构：

【main.js】
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


【App.vue】
<template>
    <div>
        {{count}} -- {{addCount}}
        <br/>
        <button @click="increase">+</button>
        <br/>
        <button @click="decrease">-</button>
        <br/>
        <button @click="oddAdd">oddAdd</button>
        <br/>
        <button @click="asyncAdd">asyncAdd</button>
    </div>
    <!--App -->
</template>

<script>
    export default {
        data() {
            return {
                count: 0
            }
        },
        
        computed:{
            addCount(){
                return (this.count + 2)%2 == 0 ? '偶数' : '奇数';
            }
        },
        
        methods: {
            increase() {
                return ++this.count;
            },
            
            decrease() {
                return --this.count;
            },
            
            oddAdd() {
                return this.count%2 == 0 ? this.count : ++this.count;
            },
            
            asyncAdd() {
                setTimeout(() => ++this.count, 1000);
            }
        }
    }
</script>

<style>

</style>

（3）测试截图：
初始画面

点击+

点击 oddAdd

再次点击 oddAdd，值不改变。

点击 -

点击 asyncAdd

2、使用vuex改造上例

（1）目录结构：

（2）代码

【安装vuex】
 npm install --save vuex
 
 
 【store.js】
 // 引入组件
import Vue from 'vue'
import Vuex from 'vuex'

// 使用组件
Vue.use(Vuex)

const state = {
    count : 0
}

const mutations = {
    INCRERASE(state){
        state.count++;
    },
    
    DECRERASE(state){
        state.count--;
    }
}

const actions = {
    increase({commit, state}) {
        commit('INCRERASE')
    },
    
    decrease({commit, state}) {
        commit('DECRERASE')
    },
    
    oddAdd({commit, state}) {
        if(state.count%2 != 0){
            commit('INCRERASE')
        }
    },
    
    asyncAdd({commit, state}) {
        setTimeout(() => commit('INCRERASE'), 1000);
    }
        
}

const getters = {
    addCount(state){
        return (state.count + 2)%2 == 0 ? '偶数' : '奇数';
    }
}

// 向外抛出实例对象
export default new Vuex.Store({
    state,  // 状态对象
    mutations,  // 包含多个更新state函数的对象
    actions,  // 包含多个回调事件的对象
    getters // 包含多个计算属性的对象
})



【main.js】
import Vue from 'vue'
import App from './App.vue'
import store from './store.js'

Vue.config.productionTip = false

new Vue({
    store: store,   // 注册 store
    render: h => h(App),
}).$mount('#app')



【App.vue】
<template>
    <div>
        {{$store.state.count}} -- {{addCount}}
        <br/>
        <button @click="increase">+</button>
        <br/>
        <button @click="decrease">-</button>
        <br/>
        <button @click="oddAdd">oddAdd</button>
        <br/>
        <button @click="asyncAdd">asyncAdd</button>
    </div>
    <!--App -->
</template>

<script>
    export default {
        
        computed:{
            addCount(){
                // 此处不要写成  this.$store.getters.addCount()
                return this.$store.getters.addCount;
            }
        },
        
        methods: {
            increase() {
                this.$store.dispatch('increase');
            },
            
            decrease() {
                this.$store.dispatch('decrease');
            },
            
            oddAdd() {
                this.$store.dispatch('oddAdd');
            },
            
            asyncAdd() {
                this.$store.dispatch('asyncAdd');
            }
        }
    }
</script>

<style>

</style>

（3）分析
　　在Vue实例注册一个 store后， 会全局生成一个 $store。
　　使用 $store.state 可以获取 state 对象里定义的 状态（数据）。
　　使用 $store.getters 可以获取 getters 对象里定义的 计算属性。
　　使用 $store.dispatch 将触发 actions 里的 函数。
　　actions 通过 commit 触发 mutations 里的函数，从而修改 state。

（4）截图：
　　与上例一样，此处不再重复截图。

（5）传递参数
　　按照下面修改代码后，点击 + 按钮，每次可以增加 33。其余按钮可以进行类似的修改。

【dispatch可以传递参数，比如传个对象】
this.$store.dispatch('increase', {name: 'tom', age: 33});

【actions中可以接收参数，并向mutations 里传】
const actions = {
   increase({commit, state}, data) {
    commit('INCRERASE', data)
  }
},

【mutations中接收参数】
const mutations = {
    INCRERASE(state, data){
       state.count += data.age;
    }
 }

3、优化vuex写法

（1）代码优化：
　　使用 mapState 替代 $store.state
　　使用 mapGetters 替代 $store.getters
　　使用 mapActions 替代·$store.dispatch

【优化上例代码】
【App.vue】
<template>
    <div>
        {{count}} -- {{addCount}}
        <br/>
        <button @click="increase">+</button>
        <br/>
        <button @click="decrease">-</button>
        <br/>
        <button @click="oddAdd">oddAdd</button>
        <br/>
        <button @click="asyncAdd">asyncAdd</button>
    </div>
    <!--App -->
</template>

<script>
    import {mapState, mapGetters, mapActions} from 'vuex'
    
    export default {
        
        computed:{
            ...mapState(['count']),
            ...mapGetters(['addCount'])
        },
        
        methods: {
            ...mapActions(['increase', 'decrease', 'oddAdd', 'asyncAdd'])
        }
    }
</script>

<style>

</style>

截图一样，此处不重复截图。

（2）传递参数
　　可以再定义一个方法，进行参数传递。
　　如下，每次点击 + 按钮，可以增加 20。其余按钮可以类似的修改。

【绑定一个事件】
<button @click="test">+</button>

【事件再触发 actions中的函数】
methods: {
    ...mapActions(['increase', 'decrease', 'oddAdd', 'asyncAdd']),
    
    test() {
        this.increase({name: 'tom', age: 20})
    }
}

【actions 接收参数，并传递给mutations 】
const actions = {
   increase({commit, state}, data) {
    commit('INCRERASE', data)
  }
}

【mutations 接收参数并更改state】
const mutations = {
    INCRERASE(state, data){
        state.count += data.age;
    }
}