VueX是什么?
VueX文档:https://vuex.vuejs.org/zh/
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单来说vuex就是对整体页面的数据传递进行管理。
使用VueX的优点
- 能够在vuex中集中管理共享的数据,易于开发和后期维护
- 能够高效地实现组件之间的数据共享,提高开发效率
- 存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
什么样的数据适合存储到VueX当中?
一般情况下,只有组件之间共享的数据,才有必要存储到vuex中;对于组件中的私有数据,依旧存储在组件自身的data中即可。
VueX的使用
首先我们还是使用vue-cli构建一个项目,项目构建参考:VueCli 脚手架详解,项目构建好了之后,我们需要安装VueX
npm install vuex --save
安装之后在main.js文件当中添加vuex
import Vuex from 'vuex'
Vue.use(Vuex)
我们在进行全局变量的管理需要使用到一个js文件进行存储,在这里我们在src目录下新建一个store.js文件,代码如下所示:在这里面的state当中储存的值就是全局变量值。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {},
actions: {}
})
//在定义vuex的时候还可以通过以下代码,效果一致,这样更好理解一点
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {},
actions: {}
})
export default store
之后我们在其他组件如何获取到这个count全局的变量值呢?
- 直接使用
this.$store.state.count
即可获取到这个值 - 从vuex当中按需导入mapState函数,之后通过导入的mapState函数,将当前组件所需的全局变量值进行映射给当前组件的computed计算
Mutation修改全局变量的值(有参、无参)
在VueX当中不推荐组件对全局变量的值进行修改。而推荐使用Mutation变更Store中的数据。
- 只能通过mutation变更Store数据,不可以直接操作Store中的数据。
- 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
如何实现呢?在前面的基础上,我们在store.js文件当中添加一个mutations块,
mutations定义好了之后怎么使用呢?使用
this.$store.commit('方法名')
即可,如下图所示:
并且在使用mutation当中还可以携带值进行操作,定义一个带参是mutation函数,
addN(state, step) {
state.count += step
}
在使用的时候,使用commit携带一个参数给到addN
this.$store.commit('addN',3)
其中我们还可以使用mapMutations将函数映射进来使用
action处理异步任务
在mutation同级目录下定义好这个actions对异步任务进行管理
而使用 this.$store.dispatch("asyncAdd")
即可调用这个actions的方法进行数据处理
而使用actions当中携带参数进行处理,和mutations的处理方式同理,
而在进行调用的时候我们也只需要加上一个参数即可,this.$store.dispatch("asyncAddN",4)
第二种方式进行获得actions进行映射
Getter数据加工
Getter用于对Store中的数据进行加工处理形成新的数据。
- Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
- Store 中数据发生变化,Getter 的数据也会跟着变化。
getters的定义和state同级,如下所示:
使用getters的值
具体代码实现如下所示:包含两种方式
VueX项目搭建案例分析与实现
首先我们还是有构建一个vue-cli项目进行开发,项目构建好之后,我们使用命令npm install vuex --save
添加vuex。之后启动项目。在这里我们可以使用vue ui 提供的ui界面导入我们所需的依赖。在vue-cli3 之后提供了这个ui。如果是vue-cli2 可以先将vue-cli卸载重新安装3版本,使用vue ui
命令打开,导入文件。
VueX和mixins
在vue当中提供了一个mixins混入,混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
当我们的vue文件当中存在很多定义的值,并且在多个界面当中使用,为了对代码进行简化,我们可以使用mixins混入。先使用一个js文件对需要进行混入的值进行定义
之后在vue文件当中进行导入,添加mixins混入即可进行使用了。
vuex和mixins的区别在于:
vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。
mixins 和 公共组件的区别在于:
与公共组件的区别
同样明显的区别来再列一遍哈~
组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后根据props来传值,但本质上两者是相对独立的。
Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对象与方法,可以理解为形成了一个新的组件。