Vuex

什么是状态管理

数据的集中管理,简单点说(全局变量),全局数据任何位置都可以访问

什么是vuex?

针对vue设计状态管理,有自己独立的设计规则(定义,读取,改变,异步处理),并且支持了vue响应式数据

vuex和全局的对象有什么区别?

1. vuex有自己的设计规则,全局对象没有
2. vuex可以响应vue的响应规则,全局对象没有

相同地方
全局在任何组件,任何位置都可以访问

具体的规则

• state 定义状态
• getters 类似组件的计算属性
• mutations 改变state的 (使用同步的方式改变,并且记录当前修改快照,如果写出异步的形式就无法记录)
• actions 处理异步逻辑

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态

具体定义

import Vue from 'vue'
import Vuex from 'vuex'
//Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）
//通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到
Vue.use(Vuex)
const store = new vuex.Store({
    state: {
        name: ''
    },
    getters: {},
    mutatios: {
        SET_NAME (state) {
            state.name = name
        }
    }.
    actions: {
        getName (context, name) {
            setTimeout(() => { context.commit('SET_NME', name)
            }, 1000)
        }
    }
})

//读取
store.state.name
//改变
store.commit('SET_NME','name')
// 异步改变
store.dispatch('getName', 'name')

属性        不用map                                  map函数
state     this.$store.state.count            ...mapState(['count'])
getters   this.$store.getters.getList         ...mapGetters(['getLit'])
mutatios  this.$store.commit('方法名',参数)    ...mapMutations(['方法名'])
actions   this.$store.dispatch('方法名',参数)   ...mapActios(['方法名'])