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(['方法名'])
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录 组件化 组件通信 状态管理 Vuex 是什么 Vuex 有什么特点 Vuex 解决了什么问题 什么类型的数据...
    前端小华子阅读 2,007评论 0 16
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,133评论 0 6
  • Vuex 概念篇 Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式...
    Junting阅读 3,089评论 0 43
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,682评论 7 61
  • public View inflate(XmlPullParser parser, @Nullable ViewG...
    pure粹阅读 99评论 0 0