day09内容
-
状态机基础 vuex
适用于中大型项目,比如在毕业设计项目中就显得有点笨重。
web开发技术栈【vue + vueRouter + vuex + axios + element-ui/antdesign】
手机开发技术栈【vue + vueRouter + vuex + axios + mintui/vant】技术开源可以避免版权问题。对于开源项目,可以在github中直接找到
main.js
let vm = new Vue({
data:{
user:null
},
created(){
this.loadArticles();
}
methods:{
loadArticles(){ }
}
})
window.vm = vm;App.vue
window.vm.user
export default {
data(){
return {}
}
created(){
this 指向当前vue实例对象
}
}用户信息不仅仅在main.js中使用,在很多组件中都有可能调用,如何共享一个组件内部中data的数据?
状态机可以将所有的公共数据进行统一维护,并且与组件解耦,当组件想要使用额时候,我们直接引用即可;另外,他可以将交互代码进行封装,然后提供统一的对外接口,所有的组件都可以调用Article.vue
loadCategories(){}Category.vue
loadCategories(){}Article.vue与Category.vue都需要访问loadCategories函数,如果没有状态机,我们需要两个组件中分别声明,赵成代码的冗余。
- vuex的应用
- 安装
script
< script src=“vuex.min.js”></ script>
脚手架 > vue add vuex
- 创建vuex对象
let store = new Vuex.Store({
state:{},
getters:{},
mutations:{},
actions:{}
}) - 注入到vue的根实例对象中
new Vue({
el:’#app’,
store,
components :{
‘briup-list’:{
template:``,
data(){
return {
}
},
created(){
this.$store
}
}
}
}) - 使用
在根vue实例对象的所有的子组件中都可以直接通过this来访问$store;也可以通过辅助函数进行访问
1) 访问state this.$store.state.xxx computed:{ ...mapState(["students"]) } 使用: {{students}} this.students 2) 访问getters this.$store.getters.xxx computed:{ ...mapGetters(["list"]) } 使用: {{list}} this.list 3) 访问mutations this.$store.commit('xxx',) methods:{ ...mapMutations(['delMemo']) } 使用: this.delMemo(参数) 4) 访问actions this.$store.dispatch('xxx',) methods:{ ...mapActions(['addMemo']) } 使用: this.addMemo(参数)
- 模块化
- 在脚手架中如何使用vuex
1) vue vuerouter vuex > vue create app05 手动选择babel 、Router、Vuex > cd app05 > vue add element #引入jquery ajax > cnpm install jquery --save #日期功能,可以将时间戳序列化 > cnpm install moment --save # es5、es6功能拓展,api, 数组,对象,函数 > cnpm install lodash --save 2) 后期添加 > vue add vuex vue + vuerouter + vuex 架构师级别 : 框架搭建 + 登录认证机制 + 业务 程序员级别:业务 1. 如何添加页面 - 路由 2. 如何完成业务 - 状态机 周四周五:
-
ajax框架 axios 【jQuery】
-
重复编写业务()
注
- vue如何用?
- 脚手架中使用vue(中大型项目中)【融合】
模块化 - vue组件(模块化)
pages
Category.vue
Article.vue - 单页面(小页面)【基础案例】
像使用jquery一样使用vue
script
- 刚创建出来的项目,没有写代码但是启动报错
一般都是因为依赖缺失
解决方案:
移除node_modules
重新执行 cnpm install / yarn install
如果还是解决不了,重新这个过程,并且切换网络
如果还是解决不了,将nodejs彻底卸载,然后重新安装
如果还是解决不了,考虑重装系统