详解参考
Vuex的理解
1.定义：Vuex是一个专为Vue.js应用程序开发的状态管理模式。Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
2.使用场景：在我们开发一个中大型项目时，这时就用到了Vuex，因为在组件中有很多兄弟组件之间的通信，很繁琐。这样的话我们就把数据都存放在Vuex中，A1、A2、A3组件需要数据的话都去Vuex里面去拿，这样的话就不用组件之间的通信了
3.优点：在state中定义了一个数据之后，可以在任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。
Vuex的运行机制：Vuex提供数据（state）来驱动试图（vue components），通过dispath派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutations，最后mutations来更改state。 白话：在组件中通过dispath派发actions，然后在actions中通过context.commit提交到mutations，在mutations中完成对store的修改。store中的数据只能由mutations来修改
核心： ①state： 存储数据的地方，类似一个仓库 ②mutations：同步操作，只有mutations才可以修改state中的数据 ③actions：异步操作，其实就是调用mutations里面的方法。 ④module：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。模块化 modeA, modeB，modeC ⑤getters：是state的计算属性。
Vuex的映射： state（数据）、getters（计算属性）需要映射在computed实例中，而mutations（同步操作放法），actions（异步操作方法）等需要放在methods实例中
computed
:{
...mapState([
"list",
])
}
methods
:{
...mapMutations([
"changes",
])
}
语法糖辅助函数
语法糖，四大金刚辅助函数：mapState,mapActions,mapMutations,mapGetters当一个组件需要多个状态是，这些状态都声明成计算属性过于冗长。于是有了辅助函数
import {mapState
,mapGetters
,mapActions
,mapMutations
} from 'vuex'
computed
:{
...mapState({
a
:"a",
b
:"b"
}),
...mapGetters({
Val
:'newVal'
})
}
methods
:{
...mapActions({
getSync
:'getSyncNum'
})
...mapMutations({
increament
:"increament"
})
}
template
{{a
}} {{b
}}
{{getSync(1)}}
<button @click
='increament(1)'></button
>
modules 模块化管理数据
状态树结构复杂的时候，可以用modules进行管理。多人协同开发，可以用modules，避免命名空间冲突。
const test1
={
namespaced
:true,
state
:{name
:'test1'},
actions
:{},
mutations
:{
changeName(state
,arg
){
state
.name
=arg
;
},
getters
:{}
}
const test2
= {
namespaced
:true,
state
:{},
actions
:{},
mutations
:{
}
},
getters
:{}
}
new Vuex.Store({
state
:{name
:"root"},
actions
,
mutations
,
getters
modules
:{
test1
,
test2
}
})
在组件中使用：
{{this.$store
.state
.name
}}
{{name
}}
{{this.$store
.state
.test1
.name
}}
{{tes1Name
}}
computed
:{
...mapState({
name
:“name"
}),
...mapState('test',{
test1Name
:'name'
})
}
methods
:{
...mapMutations('test1',['changeName'])
}
备注
...mapState("test1
',['name'
])
...mapState('test1',{newName
:'name'})
如果展开数组，组件中不可以重命名，
如果展开时对象，可以重命名
模块化在组建内获取state的状态？
在组件内这样写:
this.$store.state['old'].data
