1.关与vuex
VueX
是适用于在Vue
项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data
中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue
为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX
。在具有VueX
的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。
1.2.安装vuex 如果创建项目带vuex了,可以省略这一步
npm i vuex -s
在项目的根目录下新增一个store
文件夹,在该文件夹内创建index.js
1.3.使用
初始化store中的index.js的内容
然后把store挂载到man.js实例上
1.5.再组件中使用vuex
<template>
<div id='app'>
<h1>{{ $store.state.name }}</h1>
</div>
</template>
或者再组件方式中使用
methods:{
add(){
console.log(this.$store.state.name)
}
}
注意,请不要在此处更改state
中的状态的值
二、VueX中的核心内容
在VueX对象中,其实不止有state
,还有用来操作state
中数据的方法集,以及当我们需要对state
中的数据需要加工的方法集等等成员。
成员列表:
- state 存放状态
- mutations state成员操作
- getters 加工state成员给外界
- actions 异步操作
- modules 模块化状态管理
2.1 VueX的工作流程
Vuex官网给出的流程图
首先,Vue
组件如果调用某个VueX
的方法过程中需要向后端请求时或者说出现异步操作时,需要dispatch
VueX中actions
的方法,以保证数据的同步。可以说,action
的存在就是为了让mutations
中的方法能在异步操作中起作用。
如果没有异步操作,那么我们就可以直接在组件内提交状态中的Mutations
中自己编写的方法来达成对state
成员的操作。不建议在组件中直接对state
中的成员进行操作。
最后被修改后的state成员会被渲染到组件的原位置当中去。