什么是状态管理
数据的集中管理,简单点说(全局变量),全局数据任何位置都可以访问
什么是vuex?
针对vue设计状态管理,有自己独立的设计规则(定义,读取,改变,异步处理),并且支持了vue响应式数据
vuex和全局的对象有什么区别?
- vuex有自己的设计规则,全局对象没有
- 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(['方法名'])
