从 0 过渡到 vuex，渐进式给你讲述为什么要用vuex

1. 前言铺垫

如果看完本文后，还对vuex傻傻分不清，不清楚 state,Getter,Mutation,Action,Module , 那么请回复我 wx 15932639097 ，一定是我写的还不够清晰，我来改

• 计时器都知道吧

<template>
  <div>
    <button @click="add">+1</button>
    <p>数值现在是 ：{{count}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count : 0
    }
  },
  methods : {
    add() {
      this.count++
    }
  }
}
</script>

---

现在我们要把计时的功能抽象出一个组件

<!-- 父组件 -->
<template>
  <div>
    <button @click="add">+1</button>
    <z-add></z-add>
  </div>
</template>
<script>
import add from '@/components/add.vue'
export default {
  components:{
    "z-add":add
  }
}
</script>

<!-- add.vue 子组件 -->
<template>
  <div>
    <p>数值现在是 ：{{count}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count : 0
    }
  }
}
</script>

---

• 上面的那个实现出来很难，我看着教程都没有实现出来，而且还只是一个而已，要是父组件中调用多个例如20个子组件呢，每个子组件都需要传递给父组件一些值，那这个业务是相当的赋值和头疼了

vuex实现上面的代码逻辑

<!-- main.js 引用vuex -->
import vuex from 'vuex'
Vue.use(vuex);
var store = new vuex.Store({//store对象
    state:{
        count : 0
    }
})

<!-- 父组件 -->
<template>
  <div>
    <button @click='$store.state.count++'>+1</button>
    <z-add></z-add>
  </div>
</template>
<script>
import add from '@/components/add.vue'
export default {
  components:{
    "z-add":add
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>数值现在是 ：{{$store.state.count}}</p>
  </div>
</template>
<script>
export default {

}
</script>

---

2. vuex (modules)

前面为了方便 , 我们把 store 对象写在了 main.js 里面 , 但实际上为了便于日后的维护 , 我们分开写更好 , 我们在 src 目录下 , 新建一个 store 文件夹 , 然后在里面新建一个 index.js :

<!-- src/store/index.js -->
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
    state:{
      count : 0
    }
})

<!-- mian.js -->
import store from '@/store/index.js'

new Vue({
  store,
  ......
}).$mount('#app')

这样就把 store 分离出去了 , 那么还有一个问题是 : 这里 $store.state.count 无论哪个组件都可以使用 , 那组件多了之后 , 状态也多了 , 这么多状态都堆在 store 文件夹下的 index.js 不好维护怎么办 ?

我们可以使用 vuex 的 modules , 在 store/index.js 下新建文件夹 modules ，把业务抽离出去

<!--index.js-->
...
import add from './modules/add'
import addceshi from './modules/addceshi'

export default new vuex.Store({
    modules : {
      add,
      addceshi
    }
})

<!-- modules/add.js -->
export default {
  state : {
    count : 0
  }
}

<!-- modules/addceshi.js -->
export default {
  state : {
    count : 100
  }
}

<!-- 使用举例 ：add.vue -->
<template>
  <div>
    <p>数值现在是 ：{{$store.state.addceshi.count}}</p>
  </div>
</template>
<script>
export default {

}
</script>

---

3. mutations

前面我们 加法案例 , 我们对vuex 的依赖仅仅只有一个 $store.state.add.count 一个状态 , 但是如果我们要进行一个操作 , 需要依赖很多很多个状态 , 那管理起来又麻烦了

通俗的理解mutations,里面装着一些改变数据方法的集合，这是Veux设计很重要的一点，就是把处理数据逻辑方法全部放在mutations里面，使得数据和视图分离。切记：Vuex中store数据改变的唯一方法就是mutation

<!--
    举个例子吧，我们除了count这个一个状态之外，再加一个，例如 addzhuangtai : ture ，当为 true时候为 count 为1 ，为 false 时，count 为 0
-->