vue全家桶包括:
vue-cli:用脚手架搭建项目
vue:vue语法,渐进式框架,单页面开发,mvvm模式,有双向绑定,操作虚拟dom
vue-router:路由,用来跳转组件
axios:ajax技术,用来链接后台
vuex状态管理模式
vuex是vue的前端数据库,用来存储变量,定义的是全局变量,保证数据的一致性,
数据存储类似于sessionStorage,当浏览器关闭会删除。
Vuex
其实就是一个为Vue.js
设计的数据仓库,就是把各个组件公用的数据放到一个仓库里面进行统一的管理,这样既使得非父子组件间的数据共享变得简单明了,也让程序变得更加可维护,而且只要仓库里面的数据发生了变化,在其他组件里面数据被引用的地方也会自动更新。
为什么要使用Vuex
?
1、传值
利用Vuex
我们可以将组件之间共享的数据抽取出来,单独存放在一个store
(仓库)中去,这样各个组件需要数据的时候直接去仓库里面拿就好了,不用组件之间复杂的传值了,而且需要改变数据的时候,只需要将仓库里面的数据更改即可,各个组件里面引用的地方会自动更新。
2、Vue
中的单项数据流
与单向数据流对应的就是双向数据流:双向数据流在Vue
中也叫做‘双向绑定’,其实现主要是依靠MVVM
框架,在Vue
中主要由三个部分组成:View
、ViewModel
、Model
。
在Vue
中,数据从父组件传递给子组件,只能是单向绑定,子组件内部不能直接修改从父级传过来的数据。
属性和方法:
1.state 存储变量
2.getters 获取数据的函数,或计算函数
3.action 变更函数,异步函数
4.mutations 处理函数,同步函数
5.mudules 分割函数,用来为vuex创建子模块,在开发大型项目的时候,变量分类存储,存储在若干个子模块当中
6.this.store.getter.fun 调用getter
7.this.store.commit(函数,参数)调用mutations
8.this.store.commit(函数,参数)调用action
构建vue-cli项目
(1)安装**vuex
**
执行命令:
npm i vuex@next -S 安装vue3.0的vuex
npm i vuex -S 安装vue2.0的vuex
(2)引入**vuex
**
1. 在src
目录下新建一个store
文件夹,并在store
目录下新建index.js
2. 在index.js
里面使用vuex
,添加如下代码:
import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex)
//导出store
export default new Vuex.Store({})
3. 在main.js中引入store,然后全局注入一下,就可以在任何一个组件里面使用它了
import store from './store'
state是什么?
存数据的地方,所有的数据都要存在state里面。
Actions是什么?
Actions和Mutations比较类似,包含的都是一些方法,不同的是Actions不能直接更改数据,它的作用是提交Mutations,Mutations里面包含的才是具体操作数据的方法。
Mutations是什么?
在vuex中,唯一能够修改数据的方法就是提交mutation,简单来说mutations里面存的就是一些操作数据的方法。