vuex深入理解

一、 vuex

1.vuex是什么

        vuex是专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.使用vuex统一管理状态的好处

1.能够在vuex中集中管理共享的数据，易于开发和后期维护

2.能够高效的实现组件之间的数据共享，提高开发效率

3.存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

二、vuex的基本使用

1. 安装vuex包 npm i vuex --save
2. 导入vuex包

   import Vuex from 'vuex
   Vue.use(Vuex)

3. 创建store对象

   const store = new vuex.Store({
       state:{}
   })

4. 将store对象挂载到vue实例上

   new Vue({
       el:"#app",
       render:h=>h(app),
       store
   })

   三、vuex的四个核心概念

1.State

        state是唯一的公共数据源，所有共享的数据都要存储在state中

const store = new vuex.Store({
    state:{}
})

        组件访问state中数据的方式：

this.$Store.state.xxx

2.Mutation

        用于变更Store中的数据，并且只能通过这种方式来变更Store 中的数据，不能直接操作。

// 定义Mutation
const store = new vuex.Store({
    state:{
        count:0
    },
    mutation:{
        // 可以传参
        add(state,n){
            state.count+=n
        }
    }
})
// 触发Mutation
methods: {
    handle(){
        this.$Store.commit('add',5)
    }
}

3.Action

        用于异步变更Store中的数据，并且只能通过Mutation来变更Store 中的数据，不能直接操作。

// 定义Action
const store = new vuex.Store({
    state:{
        count:0
    },
    mutation:{
        // 可以传参
        add(state,n){
            state.count+=n
        }
    },
    action:{
        // 可以传参
        addAsync(context,n){
            setTimeOut(()=>{
                context.commit('add',n)
            },1000)
            
        }
    }
})
// 触发Action
methods:{
    handle(){
        this.$Store.dispatch('addAsync',5)
    }
}

4.Getter

        用于对Store中已有的数据进行处理，类似于vue的计算属性。

// 定义Getter
const store = new vuex.Store({
    state:{
        count:1
    },
    getters:{
        bigNum(state){
            return state.count*5
        }
    }
})
// 触发Getter
<h3>当前数字放大5倍为：{{$store.getters.bigNum}}</h3>