vuex集中式状态管理架构

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