详解Vuex
一、什么是vuex
vuex就是用来专门为vue管理状态的。也就是说，我们需要跟其他页面或者组件共享的data，可以使用vuex进行统一的集中式管理。
二、vuex的组成
在vuex中，有默认的五种基本的对象
-
state 存储状态（变量）
-
getters：对数据获取之前的再次编译，可以理解为state的计算属性，我们在组件中使用$store.getters.fun()
-
mutation：修改状态，并且使同步的。在中间中使用$store.commit()来提交修改
-
actions：异步操作，在组件中使用$store.dispath()
-
modules：store的子模块，为了方便胡葬台管理二使用的
三、使用vuex
如果在使用vue init其初始化一个项目的时候，选择了vuex作为状态管理的话，那么初始化的项目中就已经配置好了vuex了。但是为了熟悉一下vuex，我们还是先来重新配置一下
1、引入
npm install vuex --save
//
vue add vuex2、在store目录下的store.js或者index.js文件中下面这样写
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 0
}
export default new Vuex.Store({
state
})然后在main.js中引入store
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' // 引入store
new Vue({
el: '#app',
router,
store,
components: { App },
template: '这样的话，就可以在全局去使用vuex里面定义的state变量了，比如
$store.state.count
3、操作值
使用mutations和actions去操作vuex中的state。
首先是mutations，在store下面的index.js中mutaions中定义那些你需要去修改的状态的方法，比如
const mutaions = {
AddCount(state,n=0){
return (state.count+=n)
}
ReduceCount(state,n=0){
return (state.count -=n)
}
}
export default new Vuex.Store({
state,
mutations
})那么，我们怎么样去调用这两个mutation呢？
{{$store.state.count}}
methods: {
handleAddClick(n){
this.$store.commit('AddCount',n);
},
handleReduceClick(n){
this.$store.commit('ReduceCount',n);
}
}
比如我们现在在home.vue中，现在想要去修改state中count的值，那么就可以在相应的方法中这样调用mutation
而actions与mutations不同的是，它是异步操作，所以我们可以在这里去请求那些异步的请求，比如post，get这些，然后根据返回的结果去mutation改变我们的状态值。
或者直接提交mutation
const actions = {
actionsAddCount(context, n = 0) {
console.log(context)
return context.commit('AddCount', n)
},
actionsReduceCount({ commit }, n = 0) {
return commit('ReduceCount', n)
}
}
export default new Vuex.Store({
state,
mutations,
actions
})在别的页面或者组件当中，可以像下面这样去提交action
异步操作
handleActionsAdd(n){
this.$store.dispatch('actionsAddCount',n)
},
handleActionsReduce(n){
this.$store.dispatch('actionsReduceCount',n)
}
4、获取值
在vuex中，使用getter获取到state中的值，为什么要另外使用getter去获取呢？我想你可能会有这样的疑惑，因为state中的值是不能随便改变的，它是全局变量，但是有的时候我们又有另外一个全局变量，这个变量是在state中的变量的基础上做相应的运算所得到的，那么此时我们就可以使用getter去获取这样的值了。
const getters = {
getterCount(state, n = 0) {
return (state.count *= n)
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})那么在其他组件中，这样使用
{{count}}
const getters = {
getterCount(state) {
return (state.count += 10)
}
}
5、vuex官方给了一个更加简单的方式去使用Vuex，那就是 {mapState, mapMutations, mapActions, mapGetters}