什么是Vuex
Vuex是一个服务于Vue.js的状态管理模式,在vue应用中像中央存储一样为所有的组件服务,并且采用一些规则,来保证Vuex中存储的只能通过预先规定好的方式进行修改。它同时集成在Vue的官方调试工具devtools扩展中,以便支持高级功能,例如:zero-config time-travel debugging 和 state snapshot export / import
什么是状态管理模式
让我们通过Vue计数App来介绍:
1 <template lang="pug">
2 div {{ count }}
3 </template>
4
5 <script>
6 export default {
7 data () {
8 return {
9 count: 0
10 }
11 },
12 methods: {
13 increment () {
14 this.count++
15 }
16 }
17 }
18 </script>
(上边这个我写的单文件组件,可以直接引用到Vue实例中)
这是一个自加减计数的单应用,包含如下部分:
1.state:真正驱动我们app的资源
2.view:state的声明映射
3.action:用户在视图view中输入的,可能会改变state的行为
这是一个单一数据流概念的极简单的表现:
Actions ==> state ===> view ===>Actions
然而,这种简单的状态修改,会因为多个组件共用state而被轻易的打断:
1.多个组件也许都依赖于同一个状态
2.也许不同的组件都需要修改同一个状态