一.Vuex概念

可以用于解决不同组件之间数据的共享问题
可以把多个页面需要的属性存放到vuex当中

二.状态

组件内部状态:仅在一个组件内使用的状态

应用级别状态:多个组件公用的状态

三.什么情况下使用Vuex

多个视图依赖于同一状态(特指依赖多层嵌套组件的某一状态)

来自不同视图的行为需要变更同一状态  

四.Vuex核心概念

 vuex 核心概念

 state    全局共享数据库
可以理解为组件当中的data            访问state里面的属性 通过this.$store.state+属性名称
组件当中的data 是一个局部的数据仓库
state 是一个全局的数据仓库    只要数据存放到state之后 任何组件都能访问state里面的属性

把组件当中需要被共享的属性存放到vuex当中

mutations    执行同步操作的区域
mutations 可以理解为全局的方法 跟组件当中的methods类似
定义在组件当中的methods是局部方法
定义在mutations里面的方法 是全局的 可以被任何组件所访问
如果想要修改state当中的数据的话 在mutations里面修改 这是一个规范

 载荷
通俗的理解就是传递的参数

 在vuex的mutations当中 传递的载荷只能传递一个

如果想要传递多个载荷的话 可以把传递的参数合并成数组或者对象
对象方式传递：

数组方式传递：["赵六",1]

 getters    执行计算属性的区域
类似于computed计算属性
用于监听vuex state数据的变化    用法跟计算属性的用法一致

 actions    执行异步操作的区域

    可以理解为全局的方法 跟组件当中的methods类似
    mutations里面写的方法是一个同步方法
    actions 里面写的方法 可以是同步 也可以是异步
    通过actions 解决了 mutations异步操作导致的 调试工具与页面所展示的数据不一致的问题
    把异步操作写在actions中     在actions里面执行mutations里面的方法
 modules    

五.vuex实战demo（数字的加减）*

1.创建store容器，存放state,mutations,getters,actions

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 自定义模块
let changModule = {
    state: {
        title: ''
    },
    // 唯一改变状态的地方
    mutations: {
        changeTitle(state, payload) {
            console.log('title变化了', payload);
            state.title = payload.title;
        },
    },
}

// 获取changModule模块里面的属性
// commit mutations必须带模块名，action不需要带
this.$store.state.changModule.title

// 定义Vuex容器
let store = new Vuex.Store({
    state: {
        count: 100,
    },
    // 唯一改变状态的地方
    mutations: {
        addIncrement (state, payload) {
            // 不接受异步操作
            // setTimeout(() => {
            //     state.count += payload.n;
            // },1000)
            state.count += payload.n;
        },
        // 允许接受2个参数，第二参数为传递过来的参数，可以是一个对象，取对象里面某个值
        deIncrement(state, payload) {
            state.count -= payload.de;
        }
    },
    // store里面的计算属性
    getters: {
        filterCount(state) {
            return state.count >= 115 ? 115 : state.count
        }
    },
    // 包含异步操作(例如从后端拿到数据),改变状态必须commit   mutations去改变状态
    actions: {
        // 使用es6结构赋值去定义对象属性
        addAction({ commit, dispatch }) {
            setTimeout(() => {
                commit('addIncrement', { n: 5 })
                // context对象可以调用改实例的某些方法，这里触发了testAction方法
                dispatch('testAction', { test: '我被触发了' })
            }, 1000)
            // context 代表一个对象，并不是当前实例，而是包含当前的实例的某些方法
            // console.log('context', context)
        },
        testAction(tex, obj) {
            console.log(tex, obj)
        },
        testAction(tex, obj) {
            console.log(tex, obj);
        }
    },
    // 引入模块
    mudules: {
        changModule, // 
    }
})
export default store

2.加减组件

<template>
  <div>
    <h2>简易加法计算器</h2>
    <div>
      <input type="button" value="-" @click="deHandle({ de: 20})" />
      <span>{{count}}</span>
      <input type="button" value="+" @click="addHandle" />
      <p>{{num2}}</p>
    </div>
  </div>
</template>

<script>
    import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
    export default {
      computed: {
        count() {
           return this.$store.state.count
         },
        // 辅助函数的用法,直接传入数组
        // ...mapState(['count']),

     // 计算属性的辅助函数，key值对应的计算属性的值，value对应store里面的计算属性值
     ...mapGetters({
       num2 : 'filterCount'
     })
     // num2() {
     //   return this.$store.getters.filterCount
     // }
     }
      ,
      methods: {
        ...mapActions({
          addHandle: 'addAction'
        }),
        // 辅助函数不能直接传值，可以在方法体内传值
        ...mapMutations({
          deHandle: 'deIncrement'
        })
        // addHandle() {
        //   // this.$store.commit('addIncrement', {
        //   //   n: 15,
        //   // })
        //   this.$store.dispatch('addAction')
        // },
        // deHandle() {

        //   // this.$store.commit('deIncrement');
        // mutations传递参数
        //   this.$store.commit({
        //     type: 'deIncrement',
        //     de: 10,
        //   });

        //   // this.$store.dispatch('testAction', { haha: '哈哈哈' }) // actions传递参数
        // },

        // ...mapActions({
        //   addHandle: 'addAction'
        // }),
        // ...mapMutations({
        //   deHandle:'deIncrement'
        // })
      }

    }
</script>
<style>
</style>

3.通过上面的demo和概念，大家应该就可以完全了解这张图的含义：