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了。