vuex是一个专门为vue.js设计的集中式状态管理架构.
什么是状态?简单来说就是data中需要共用的属性.比如:我们有几个页面要显示用户名和用户等级,购物车信息,或者显示用户的地理位置.如果我们不把这些信息设置为状态,那每个页面遇到后都会到服务器进行查找计算,返回后再显示,这样很麻烦(以前是用session来存储的),所以vue作者就给我们提供了vuex。
什么情况下使用Vuex?(面试题)
1.多个视图依赖同一个状态;
2.来自不同视图的行为要变更同一状态;
vuex的原理(面试题)
看官方的Vuex图我们知道Vuex包含三大块State,Action,Mutations,首先它有一个State是我们视图中的数据,它通过render函数渲染到我们的组件当中,组件需要更新数据之前它会发起一个dipatch到actions里,在actions里会发起异步请求调取服务端的api进行交互,交互完成以后会发起一个commit提交到mutions,mutions它会做两件事:第一跟我们的开发者工具产生交互,第二是通过mutate改变我们一开始说的State.
一.先来个小demo(即state)
1.创建项目和安装vuex
vue2.9创建项目
vue init webpack vuex
安装vuex
cnpm install vuex --save
2.在src目录下创建一个vuex夹,在vuex文件夹里创建一个store.js,里面内容如下:
通过以上两步就把vuex安装好了.
3.开始我们第一个小案例,需求:就是下面有一个加的点击按钮,点击完后上面显示加的数字.
步骤如下:
a.在store,js里增加一个常量对象
const state={
count:1
}
这里我们定义的state就相当于状态,也就是数据管理仓库.
b.用export default 封装代码,让外部可以访问
export default new Vuex.Store({
state
})
c.在components文件夹里新建一个Count.vue组件模板,里面写法如下:
说明:如果要使用store.js里的值,首先要引入,引入之后,记得要将公共仓库写进data同级的里面,如下面的store。
<template>
<div>
<h2>{
{
msg}}</h2