VUE第八天学习

内容：vuex、element-ui 一、vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 仓库 ​ state、mutations、getters、actions、module 1.安装 ​ npm install vuex --save 2.引用 import Vuex from 'vuex' Vue.use(Vuex) const store = Vuex.Store({ }) 3.核心概念 (1)state ​ 类似单页面data ​ Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。 (2)mutations ​ 类似单页面methods ​ 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数 mutation 同步操作 (3)actions Action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。 (4)getters 类似computed 有时候我们需要从 store 中的 state 中派生出一些状态 示例代码 /src/main.js来定义仓库 import Vuex from 'vuex' Vue.use(Vuex) //创建仓库 const store = new Vuex.Store({ state:{ msg:'hello vuex', count:5 }, mutations:{ setMsg(state,txt){ state.msg = txt }, setCount(state){ state.count+=2 } }, actions:{ setCount(context){ console.log('actions被执行了') context.commit('setCount') } }, getters:{ newCount:state=>{ return state.count*3 } } }); 在页面组件中使用/改变仓库中的数据： (5)module 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。 namespaced:true表示启用命名空间 const store = new Vuex.Store({ state, mutations, actions, getters, modules:{ member:{ namespaced:true,//启用命名空间 state:{ msg:'hello module member' }, mutations:{ setMsg(state,txt){ state.msg = txt; } } } } }); 二、axios代理配置【跨域】 [图片上传失败...(image-fb95ad-1582112522393)] 出现以上错误就是不允许跨域 跨域： 1.nginx进行跨域 2.apache进行跨域 3.程序代码进行设置，允许跨域 4.webpack配置代理进行跨域 /confing/index.js proxyTable 代理配置表 proxyTable: { '/关键词':{ target:'http://localhost:3001', pathRewrite:{ '^/关键词':'/api' } } } 当项目中要请求包含“/关键词”的链接时，如：http://localhost:8080/api/userlist 代理配置会进行重定向到target对应的链接 http://localhost:3001/api/userlist pathRewrite:对链接地址中的关键词进行重写 三、ui库 1.element-ui 官网：https://element.eleme.cn/#/zh-CN (1)安装 npm i element-ui --save (2)引用 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); new Vue({ el: '#app', router, render: h => h(App) }) 2.mintui(移动端) 官网：https://mint-ui.github.io/#!/zh-cn 3.iview(pc端) 官网：https://www.iviewui.com/ 4.vant(移动端) 官网：https://youzan.github.io/vant/#/zh-CN/ 四、作业 1.使用element-ui或者iview进行后台管理系统页面布局 2.利用本地数据实现数据的管理（管理员用户的添加、列表展示、删除功能）

本文章由javascript技术分享原创和收集