VUEX---状态管理工具
作用:用来管理各组件共享数据的工具,组件通信传递数据的时候,子传父,父传子的方式复杂不易维护,vuex提供一个仓库,存储共享数据,用于组件数据通信,各组件的数据是同步的,实现响应式开发。
构建 vuex 环境
- 创建一个项目,有两个子组件,和根组件之间共享数据,三者数据同步,任何一个组件可以修改数据
创建一个空仓库
安装VUEX (手动)
如果选择手动安装,vue2输入命令npm install vuex@3
,如果报错可能是依赖产生冲突,可再尝试npm install vuex@3 --force
试一试
新建文件模块
在 src 下新建一个文件夹 store ,在里面新建一个 index.js 文件,里面存放的就是vuex的核心代码
创建仓库
javascript
//先导入核心包
import Vue from 'vue'
import Vuex from 'vuex'
//安装插件
Vue.use(Vuex)
//创建仓库,空的
const store = new Vuex.store()
//到处给main.js使用
export default store
main.js导入挂载
使用仓库---state
state 提供唯一的公共资源,所有共享的数据都要统一放到 Stpre 中的State 存储,在state 对象中可以添加我们要共享的数据。
注意:state 状态,即数据,类似组件中的 data, 但data是组件自己的数据,state 是所有组件共享的数据
获取数据
获取 store:
-
this.$store
-
import 导入 store
模板中: {{ $store.state.xxx }}
组件逻辑中:this.$store.state.xxx
JS模块中:store.state.xxx
辅助函数
每次获取仓库数据的时候,都要 <math xmlns="http://www.w3.org/1998/Math/MathML"> s t o r e 或者 t h i s . store或者this. </math>store或者this.stroe 比较重复难写,可以把state 中是的数据,定义在组件计算属性中
javascript
computed: {
count () {
return this.$store.state.count
}
}
//模板中使用数据就可以直接 {{ count }}
- 通过赋值函数简化: mapState 是辅助函数,帮我们把 store 的数据
自动
映射到组件的计算属性中,这个函数是vuex提供的一个函数就可以调用,使用时需要导出来,以数组的方式引入state,最终这个函数得到的是一个对象
JavaScript
//从vuex中导入函数
import { mapState } from 'vuex'
//在计算属性中写入辅助函数
computed () {
//count () {return this.$store.count} 之前是这么一个个写
...mapState(['count','title'])
}
//同样在模板中就直接写 {{count}} 简写形式
修改数据--mutations
- vuex同样遵循单向数据流,组件中不能直接修改仓库的数据
- 单向数据流: 你可以理解为只读文件,你能读,但是不能修改,如果要修改就要通知xxx,让xxx修改,如果要修改,就需要发送请求给仓库进行修改。在一个子组件中强行写入执行函数,虽然可以运行,但修改的组件多了,维护时就不容易知道是谁修改的,不满足工程化开发要求。
Mutations的基本使用
py
自动接口插件
-
json-seerver 当我们前端页面写好之后,后端接口没准备好,我们就可以通过临时搭建的服务器,自己生成接口调用,来测试自己的web项目
-
全局安装:
npm install -g json-server
-
在项目下创建一个
db
文件夹,文件夹里面创建一个文件index.jsonw
文件,里面就可以存放我们需要的数据,只要提供数组包对象的格式,插件就会自动给我们提供增删改查的一套接口, -
然后在
db
文件下打开终端,输入json-server --watch index.json
命令,就启动了服务器环境,根据提供的端口号,就可以查看返回的数据,进行页面渲染。 -
服务器启动成功之后,窗口不能关闭,不然访问不了。
注意: 这里只是模拟一个临时的假数据,用来进行测试的,等后端提供接口之后就可以直接还了。
npm安装axios时,npm install axios安装可能报错,试一试npm install axios --save --legacy-peer-deps。原因:npm install axios是最新版的axios,如果你电脑以前安装的是旧版本,有些依赖包就会没安装到
store仓库的用法
模块创建
-
在
store
下创建一个文件夹modules
,里面放的就是各个模块的数据子模块cart.js
javascriptimport axios from 'axios' export default { namespaced: true, state () { return { // 购物车数据 list: [] } }, mutations: { updateList (state, newList) { state.list = newList } }, actions: { // 异步请求数据 async getList (context) { const res = await axios.get('http://localhost:3000/frends') //console.log(res) context.commit('updateList', res.data) } }, getter: {} }
根文件index.js
javascriptimport Vue from 'vue' import Vuex from 'vuex' import cart from './modules/cart' Vue.use(Vuex) export default new Vuex.Store({ modules: { cart } })