前言
如果你有在使用vue.js且项目过于庞大，那么我想你可能会对vue组件之间的通信感到崩溃。多层嵌套、多个组件公用同一个状态，这会使得我们对组件之间的通信操作感到复杂，混乱，因此才会有vuex。
vuex概念
vuex是一个专为 vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单来说，就是把vue所有组件的状态统一放到一个地方来管理。
vuex的组成部分、用处
- state：理解成组件的data，存在状态的地方
- getters：理解成组件的计算属性
- mutations：更改状态的唯一方法是提交mutation，在mutation里面更改state的状态
- actions：action提交mutation，而不是直接变更状态，可以包含任意的异步操作
- modules：模块化，最后会讲到
vuex.png
分析上图，从组件开始，组件调用dispatch分发actions，然后actions里面用commit调用mutations方法（1个或者多个，因此才叫actions(分发)）,mutations里面改变state里面的状态，然后响应到组件实现数据更新。
安装、使用vuex
首先我们在 vue.js 开发环境中安装 vuex
npm install vuex --save
然后在main.js中加入
import vuex from 'vuex';
Vue.use(vuex);
var store = new vuex.Store({ //store对象
state:{
show: false
}
})
new Vue({
el: '#app',
router,
store, // 使用store
template: '<App/>',
components: { App }
})
你可以清楚地看到$store已经成功的挂载到vue实例中
vue.png
现在你可以在任何组件中访问state中的属性
// app.vue
created() {
console.log(this.$store.state.show); // false
}
但实际上为了日后的维护，我们还是不要把store对象写在main.js里面，这就涉及到了模块化。我们在src目录下新建一个store文件夹，然后在里面新建一个index.js
import Vue from 'vue';
import vuex from 'vuex';
Vue.use(vuex);
// 导出
export default new vuex.Store({
state:{
show:false
}
})
那么相应的，main.js里的代码应该改成
//vuex
import store from './store';
new Vue({
el: '#app',
router,
store, // 使用store
template: '<App/>',
components: { App }
})
为了更好的维护
上面我们讲到，完整的store对象由state、getters、actions、mutations组成，为了更好的维护，那么我们应该在store目录下新建其对应的js文件
目录.png
实现简单的dialog显示和隐藏
后面才讲模块化，先从简单的做起
文件入口index.js
import Vue from 'vue';
import vuex from 'vuex';
import state from './state';
import getters from './getters';
import actions from './actions';
import mutations from './mutations';
Vue.use(vuex);
export default new vuex.Store({
state,
getters,
actions,
mutations
})
state.js
export default {
show: false
}
getter.js
export default {
doneShow(state) {
return !state.show
}
}
actions.js
export default {
switch_dialog(context) {
// context对象与$store具有相同方法和属性
context.commit('switch_dialog');
}
}
mutations.js
export default {
switch_dialog(state) {
state.show = !state.show;
}
}
dialog.vue
<template>
<div class="dialog" v-if="show">我是dialog</div>
</template>
<script>
export default {
computed: {
show() {
return this.$store.state.show;
}
}
};
</script>
现在我们可以在dialog组件的外部去控制他的显示和隐藏
<template>
<div class="homepage">
<dialog-component></dialog-component>
// 下面会有详解commit和dispatch方法
<button @click="$store.commit('switch_dialog')">switch</button>
</div>
</template>
<script>
import dialog from "./dialog.vue";
export default {
name: "homepage",
components: {
'dialog-component': dialog
}
};
</script>
让我们来回顾一下上述的内容
- dialog组件有一个show状态
- 组件外部使用commit方法调用mutasions里面对应的方法
- 或者组件外部使用dispatch分发actions，然后actions里面commit分别调用mutations里面的方法(1个或者多个)
- mutaions里面改变state.show的状态
涉及到的方法
- commit => mutations，用来触发同步操作的方法
- dispatch => actions => mutasions，用来触发异步操作的方法
传递数据
// 组件里面
$store.dispatch('show', '我是数据');
// actions对应的方法
show (context, data) {
context.commit('show', data);
}
// mutations对应的方法
show (state, data) {
console.log(data); // 我是数据
}
mapState、mapGetters、mapActions、mapMutations辅助函数
很多时候 , $store.state.dialog.show 、$store.dispatch('switch_dialog') 这种写法又长又臭 , 很不方便 , 我们没使用 vuex 的时候 , 获取一个状态只需要 this.show , 执行一个方法只需要 this.switch_dialog 就行了。
在需要的映射的组件内写一下代码
<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
computed: {
...mapState({
show: state => state.show // 将 `this.show` 映射为 `this.$store.state.show`
}),
...mapGetters([
"doneShow" // 将 `this.doneShow` 映射为 `this.$store.getters.doneshow`
])
},
methods: {
...mapActions([
"switch_dialog" // 将 `this.switch_dialog()` 映射为 `this.$store.dispatch('switch_dialog')`
]),
...mapMutations([
"switch_dialog" // 将 `this.switch_dialog()` 映射为 `this.$store.commit('switch_dialog')`
])
}
};
</script>
模块化
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
},
state: {
baseInfo: '我是公共的信息'
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
因此我们只需要改一下index.js和dialog.vue就能正常的运行
index.js
export default new vuex.Store({
modules: {
dialog: {
state,
getters,
actions,
mutations
}
}
})
dialog.vue
<script>
export default {
computed: {
show() {
return this.$store.state.dialog.show;
}
}
};
</script>
显然，我们还需要为每一个模块的state、getters...命名，这个大家去命名就好啦，推荐统一放到每个模块的文件夹store/dialog/state.js，而主文件index.js还是在store/index.js
网友评论