uniapp中使用vuex（表单验证 /生命周期/vx调试注意）

后台管理

后台管理   权限菜单 + 增删改查分页 + e-charts图标
	权限菜单不太会
	增删改查分页就很简单
	有空看一下vue-admin

由后台管理引发得一个思考，如果纯用ele组件库写，开发效率还是很低，如果能二次封装一下ele，写起来会更快，就是二次封装一个表单，表格，还有不同得弹出框，然后表单，表格得内容都可以自定义，传递一个什么type下去，就显示什么。 e-charts图表用的也比较平凡，也可以封装一个。

小程序

vuex (在uniapp中使用)

• 背景是这样：首页有一个活动栏，由三种状态，一次没发布过是一种，由活动是一种，没活动是一种，但是由于是其他页面点击开启活动之后，首页活动栏会跟着变，我就想着写三种不同的活动栏，然后用vuex控制显示隐藏不同的活动栏。
  但是后来发现，其实首页请求活动是一个接口的到的数据，那个接口每次会返回一个状态，分别对应了三种活动栏，所以没必要用vuex，直接在首页v-show给标记控制显示隐藏即可。
  我一开始不知道他返状态，我想的是点了发起活动，我就让有活动的显示，其他的隐藏，然后终止活动了，就让没活动显示，有活动的隐藏，因为页面嵌套了2.3层，所以想用vuex，当时这么想的。既然用了，就来复习一下把！

五大核心

• state 存放公共状态的
• mutation 更改状态必n须在这个里面改 更改状态的方法
• action 发送异步请求的
• getter 派发出一个新状态 暂时没用过，但是看别人用过
• module 模块化

vuex工作流程

vuex的工作流程：在组件里通过this.$store.dispatch(“cinema/getCinemaActions”) 派发对应的actions，在actions里面commit连接对应的mutation，mutation里面再去更改state，状态改变，视图更新

vuex底层原理

vue规定安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法，通过全局注入store对象，来实现组件间的状态共享

vuex刷新数据丢失怎么解决

因为vuex的数据是存在内存中的，所以刷新会丢失数据，解决方法就是下插件，把他存到本地就可以了，我还没用到过，先记录

vuex和localstorage得区别

vuex适用与组件和组件之间传值，localstorage适用页面和页面之间传值，而且vuex是响应式的，localstorage不具备响应式。举个例子：比如我A页面和B页面都用一个数据，我想在我改了A页面的某个数据的时候，我B页面的的那个数据也相应的进行变化，那么用vuex就可以实现，但是用localstorage就实现不了。

vuex的map映射

• vuex提供了映射函数，在组件的时候 import {mapxxx， mapxxx} from “vuex” 即可引入。
• 需要注意的是：state 和 getters 需要写在computed里面
  mutation 和 action 需要卸载methods里面
• 如果不用map映射的话
  • 比如要获取vuex的state，那么就需要 this.$store.state.变量名
  • 要触发mutation方法 ， this.$store.commit(“方法名”)
  • 要派发action，this.$store.dispatch(“方法”)
  • 要获取getter，this.$store.getters.变量名
• 如果用map映射的话就不需要这样，可以直接this.变量名 / 方法名 前提是没有模块化的情况下
  

模块化

• 注意：模块化一定要 namespaced:true,//开启命名空间
• vuex模块化结构
  
• vuex模块化 index.js文件
  
• vuex模块化 单个模块结构
  

表单验证

• 在写小程序用uniapp时候，写活动页面也涉及表单，增删改查等，表单就少不了表单验证，在uniapp插件市场找了个插件，可以自定义正则，但是不太会写，都是百度的。
• 遇到一个正则 只能写1-9.9之间的数
• let reg = /^(?=1.[1-9]|[1-9].\d).{3}${|}^{(}[1-9])$/ ==> 只能输入1 - 9.9的值

uniapp生命周期钩子

写几个我和常用的

• onLoad(options) {} 监听页面加载，接受一个参数，为上个页面传递下来的 只会执行一次
• onReady（）{} 监听页面初次渲染完成，也只会执行一次
• onShow（）{} 页面每次出现在屏幕上都触发，可以多次触发
  写的时候发现一个问题，我点击添加活动成功了，首页的活动数据没有发送改变，刷新之后就改变了，原因是因为，我把获取首页数据的方法，在onload里调用了，只会执行一次，把这个获取互动数据的方法，放在onshow里面调用，就完美解决了添加活动成功跳到首页，活动那个不更新的情况了

用hbux/uniapp写小程序，要在wx调试工具上调试

• 需要在manifest.json配置appid
• 需要在微信 设置 --> 通用设置 --> 安全 —> 服务端端口打开 即可
• 需要在setting.json 运行配置 —> 小程序运行配置 --> 配置路径