第一步,了解Vuex
🤯 想象一个场景
如果你的项目里有很多页面(组件/视图),页面之间存在多级的嵌套关系,此时,这些页面假如都需要共享一个状态的时候,此时就会产生以下两个问题:
多个视图依赖同一个状态
来自不同视图的行为需要变更同一个状态
🤪 动动你的小脑袋你就会想到解决以上方法的方案:
对于第一个问题,假如是多级嵌套关系,你可以使用父子组件传参进行解决,虽有些麻烦,但好在可以解决;对于兄弟组件或者关系更复杂组件之间,就很难办了,虽然可以通过各种各样的办法解决,可实在很不优雅,而且等项目做大了,代码就会变成屎山,实在令人心烦。
对于第二个问题,你可以通过父子组件直接引用,或者通过事件来变更或者同步状态的多份拷贝,这种模式很脆弱,往往使得代码难以维护,而且同样会让代码变成屎山。
😇 此时,既然思考到了这里,如果换一种思路呢:
把各个组件都需要依赖的同一个状态抽取出来,在全局使用单例模式进行管理。
在这种模式下,任何组件都可以直接访问到这个状态,或者当状态发生改变时,所有的组件都获得更新。
👶 这时候,Vuex诞生了!
这就是 Vuex 背后的基本思想,借鉴了 Flux、Redux。与其他模式不同的是,Vuex 是专门为 Vue 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
😨 接着,你就会看到下面这张官网的vuex使用周期图(看不懂没关系):
🤩 什么时候应该用vuex呢?
这个问题因人而异,如果你不需要开发大型的单页应用,此时你完全没有必要使用vuex,比如你的页面就两三个,使用vuex后增加的文件比你现在的页面还要多,那就没这个必要了。
假如你的项目达到了中大型应用的规模,此时您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
🤔 对于vuex的简单介绍就到这里,接下来,我们一起用起来吧!
第二步,安装
进入项目,在命令行中输入安装指令,回车
npm install vuex --save
然后配置 vuex,使其工作起来:在src路径下创建store文件夹,然后创建index.js文件,文件内容如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 定义一个name,以供全局使用
name: '张三',
// 定义一个number,以供全局使用
number: 0,
// 定义一个list,以供全局使用
list: [
{
id: 1, name: '111' },
{
id: 2, name: '222' },
{
id: 3, name: '333' },
]
},
});
export default store;
修改main.js:
import Vue from 'vue';
import App from './App';
import router from './router';
import store from './store'; // 引入我们前面导出的store对象
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
store, // 把store对象添加到vue实例上
components: {
App },
template: '<App/>'
});
最后修改App.vue:
<template>
<div></div>
</template>
<script>
export default {
mounted() {
// 使用this.$store.state.XXX可以直接访问到仓库中的状态
console.log(this.$store.state.name);
}
}
</script>
此时,启动项目 npm run dev
,即可在控制台输出刚才我们定义在store中的name的值。
- 🤖 官方建议1:
官方建议我们以上操作this.$store.state.XXX
最好放在计算属性中,当然,我也建议你这么使用,这样可以让你的代码看起来更优雅一些,就像这样:
export default {
mounted() {
console.log(this.getName);
},
computed:{
getName() {
return this.$store.state.name;
}
},
}
此时可以得到和上面一样的效果。
- 🤖 官方建议2:
是不是每次都写this.$store.state.XXX
让你感到厌烦,你实在不想写这个东西怎么办,当然有解决方案,就像下面这样:
<script>
import {
mapState } from 'vuex'; // 从vuex中导入mapState
export default {
mounted() {
console.log(this.name);
},
computed: {