前言
今天要分享的知识是Vuex
码字不易,转载请说明!!!
目录
②在src下创建store模块,分别维护state/actions/mutations/getters
③在store/index.js文件中新建vuex的store实例,并注册上面引入的各大模块
目标
1、了解vuex中的各个js文件的用途
2、利用vuex同步存值
3、利用vuex取值
4、Vuex的异步加载问题及后台调用问题
Vuex是什么?
官方解释
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”(数据仓库) 让其在各个页面上实现数据的共享包括状态,并且可操作
一、Vuex中的各个js文件的用途
变量传值的演变形式
方法1: 用组件之间通讯。这样写很麻烦,并且写着写着,估计自己都不知道这是啥了,很容易写晕。
方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后模块b获取x。这样我们就很容易获取到数据
图解Vuex各组件
Vuex分成五个部分:
1.State:单一状态树
2.Getters:状态获取
3.Mutations:触发同步事件
4.Actions:提交mutation,可以包含异步操作
5.Module:将vuex进行分模块
官方图解Vuex
二、vuex使用步骤
①安装 npm install vuex -S
②在src下创建store模块,分别维护state/actions/mutations/getters
③在store/index.js文件中新建vuex的store实例,并注册上面引入的各大模块
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)
/* 每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。 */
const store = new Vuex.Store({
state, /* 共同维护的一个状态,state里面可以是很多个全局状态 */
getters, /* 获取数据并渲染 */
actions, /* 数据的异步操作 */
mutations /* 处理数据的唯一途径,state的改变或赋值只能在这里 */
})
export default store