vuex - 基础篇

在vue的使用过程当中，当单页应用愈来愈大的时候，项目可能会出现要使用一些公共的数据，vue也设计了vuex供开发者在开发vue单页应用时对应用公共数据进行一个更好的管理。

固然，在vue的项目中，使用vuex不必定是必要的，看项目须要。

what

vuex是一个vue的数据仓库，由于vue是组件化开发，数据在组件内是局部的，若是须要作数据共享，好比登陆的用户信息，其实全部的地方均可能会用到，这个时候抽离出来是颇有必要的。

数据流动

vuex是一个统一的数据管理，数据是经过vuex定义的规则来进行流动的。

vuex中数据只能经过mutation来提交，mutation只能进行同步操做，action进行异步操做。

核心

vuex提出了这几个核心的概念

• state
• getter
• mutation
• action

state

state就是数据源，存储着咱们定义的公共数据

在state中，存储着咱们要的公共数据，在vue组件中，咱们能够经过computed来获取state数据，当state改变时，computed也会随之更新。

// 定义
state: {
    userName: 'binnie'
}

// 使用
computed: {
    userName() {
       return this.$store.state.userName
    }
}
复制代码

getter

getter，顾名思义，其实就是获取数据，固然，若是要原封不动的state数据，直接获取就行了。若是要获取的数据是对state数据进行操做后返回，咱们能够在computed里面操做，也能够看getter里面处理，看需求状况。getter属于统一处理。

// 定义
getters: {
    userNamelen: state => {
        return state.userName.length
    }
}

// 使用
computed: {
    userNamelen() {
       return this.$store.getters.userNamelen
    }
}
复制代码

mutation

vuex中，只有mutation能够修改state的数据，而且mutation的修改只能是同步的。

// 定义
mutations: {
    userName(state, payload) {
        state.userName = payload.userName
    }
}

// 提交修改
store.commit('userName', { userName: 'change'})
复制代码

action

mutation只能进行同步操做，异步操做的话就要放到action中处理。

// 定义
actions: {
    userName(context) {
        fetch().then((name) => {
            context.commit('userName', { userName: name})
        })
    }
}

// 提交修改
store.dispath('userName', {})
复制代码

写在最后

vuex做为vue的数据管理仓库，方便了咱们对公共数据的管理。

固然，关因而否须要使用是看项目须要。当项目中的数据须要抽出公共数据的状况下使用是合适的；当项目较小或者数据基本不交叉，那就没有比较使用vuex了。