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