Vuex介绍

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说，状态管理可以理解成为了更方便的管理组件之间的数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变数据

 （可能有人说什么乱七八糟的，一句不懂，当然我也不懂，那就不废话了，直接通过代码来讲解吧）

引入Vuex的步骤 

 第一步：安装Vuex

npm install --save vuex

 第二步：配置Vuex文件

import{ createStore } from 'vuex'

//Vuex的核心作用就是帮我们管理组件之间的状态的
export default createStore({
    //所有的状态都放在这里（数据）
    state: {
        counter:0
    }
})

第三步：在主文件中引入Vuex

import store from './store'
app.use(store)

第四步：在组件中读取状态

counter:{{ $store.state.counter }}

 或者：

{{ counter }}

//vuex提供的state快捷读取方式
import { mapState } from 'vuex';
//专门读取vuex的数据
computed:{
    ...mapState(["counter"])
}

操作Vuex状态

最常用的核心概念包含：State、Getter、Mutation、Action

Getter

对Vuex中的数据进行过滤

import { createStore } from 'vuex'

export default createStore({
    state:{
        counter:0
    },
    getters:{
        getCount(state){
            return state.counter > 0 ? state.counter:"counter小于0，不符合要求"
        }
    }
})  

在组件中读取：

counter:{{ $store.getters.getCount }}

 或者：

{{ getCount }}

import { mapGetters } from 'vuex';
computed:{
    ...mapGetters(["getCount"])
}

Mutation

更新Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数

import { createStore } from 'vuex'

export dafault createStore({
    state:{
        counter:0
    },
    getters:{
    },
    mutations:{
        addCounter(state,num){
            state.counter += num
        }
    }
})

在组件中读取：

增加

methods:{
    addClickHanle(){
    //固定调用方式
        this.$store.commit("addCounter",10)
    }
}

或者：

import { mapMutations } from "vuex"

methods:{
    ...mapMutations(["addCounter"]),
    addClickHandle(){
        this.addCounter(20)
    }
}