UI框架
element-ui(pc端)
网址:https://element.eleme.cn/#/zh-CN
定义
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
安装
cnpm i element-ui -S
引入
main.js
// 1.引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
使用
iview(pc端)
网址:https://iviewui.com/
定义
一套基于 Vue.js 的高质量
UI 组件库
安装
npm install view-design --save
引入
main.js
// 2.引入iview
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
Vue.use(ViewUI);
使用
<template>
<div>
<Button>Default</Button>
<Button type="primary">Primary</Button>
<Button type="dashed">Dashed</Button>
<Button type="text">Text</Button>
<br><br>
<Button type="info">Info</Button>
<Button type="success">Success</Button>
<Button type="warning">Warning</Button>
<Button type="error">Error</Button>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
vant(移动端)
网址:https://youzan.github.io/vant/#/zh-CN/home
定义
轻量、可靠的移动端 Vue 组件库
安装
npm i vant -S
引入
main.js
// 3.引入vant
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
使用
vuex
定义
-
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
-
应用场景：多个组件共享数据或者是跨组件传递数据时 。
安装
npm i vuex --save
流程
-
页面组件通过mapAction异步提交事件到action。
-
action通过commit把对应参数同步提交到mutation，mutation会修改 state中对应的值。
-
通过getter把对应值派生或者不派生传出去，
-
在页面的计算属性中，通过mapGetter来动态获取state中的值。
引入
main.js
//引入vuex
import Vuex from 'vuex'
Vue.use(Vuex)
//创建store仓库
//该对象中包含了5个核心属性
const store = new Vuex.Store({
state:{
name:'晨阳',
age:20,
}
});
new Vue({
store,
render: h => h(App),
}).$mount('#app')
vuex的属性
state
- vuex的基本数据，用来存储变量 。
const store = new Vuex.Store({
state:{
name:'晨阳',
age:20
}
});
//通过this.$store.state访问基本数据。
export default {
mounted(){
console.log(this.$store.state);
}
}
mapState辅助函数
//引入mapState
import {mapState} from 'vuex'
export default {
//因为是展开的都是属性，而组件中属性写在data，computed，props中，只有computed合适。
computed:{
...mapState({
// 对象中冒号左侧的属性名自定义 冒号右侧的属性与state中的属性名一致。
name:"name"
})
}
}
mutations
- 更改Vuex的基本数据的唯一方法是提交mutations。直接变更数据并且只能改同步的数据。
- 需要异步使用action。
mutations:{
//方法名自定义
//系统自动注入第一个参数为:state,这个参数为基础数据（state）。
changeName(state,name){
state.name = name;
}
}
<button @click="$store.commit('changeName','ww')">点击</button>
actions
- 提交mutations
- 异步请求处理
mutations:{
changeName(state,name){
state.name = name;
}
},
actions:{
//1.操作name属性
//2.方法名自定义
//3.该方法中系统自动注入第一个形参:context，context中有commit方法。
nameActions(context,name){
//commit永远对接mutations中的方法
context.commit('changeName',name)
}
}
<!-- 组件中通过dispatch来对接actions中的方法 -->
<button @click="$store.dispatch('nameActions','zs')">点击</button>
mapActions辅助函数
import {mapActions} from 'vuex'
export default {
methods:{
//mapActions展开的都是方法，因此写在methods中。
//mapActions可以对接actions中多个方法
//冒号左侧为自定义事件名 冒号右侧对接actions中的方法名
...mapActions({
changeName:"nameActions"
})
}
}
getters
- 从基本数据(state)派生的数据，相当于state 的计算属性 。
getters:{
//1.系统自动注入参数:state
//2.方法名为自定义
//3.该方法中处理的数据必须return.这个函数就相当于变量就是函数的返回值。
students(state){
return state.students
},
// 求总分
total(state){
let sum = 0;
state.students.map(item=>{
sum += item.score
})
return sum
},
avg(state){
let sum = 0;
state.students.map(item=>{
sum += item.score
})
return sum/state.students.length
}
}
mapGetters辅助函数
// 辅助函数
import {mapActions,mapGetters} from 'vuex'
export default {
computed:{
//因为是展开的都是属性，因此在computed写。
// 对象中冒号左侧为自定义属性名 冒号右侧为getters中的方法名并且被调用。
...mapGetters({
students:"students",
total:"total",
avg:"avg"
})
}
}
封装
- store/index.js
//引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//与数据有关的封装在一起。
import {state,mutations,getters} from './mutations'
//面向组件的单独封装。
import actions from './actions'
export default new Vuex.Store({
state,
mutations,
actions,
getters
});
- store/mutations.js
export const state = {}
export const mutations = {}
export const getters = {}
- store/actions.js
export default {
nameActions(context,name){
context.commit('changeName',name)
},
ageActions(context,age){
context.commit('changeAge',age)
}
}
modules
模块化vuex，可以让每一个模块拥有自己的 state、mutation、action、getters,使得结构非常清晰，方便管理。
store/index.js
// 引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import {state,mutations,getters} from './mutations'
import actions from './actions'
// 引入子模块
import goodsList from './modules/goodsList'
import user from './modules/user'
export default new Vuex.Store({
state,
mutations,
actions,
getters,
modules:{//存放子模块
goodsList,
user
}
});
namespaced
- 在子模块中有namespaced选项。为命名空间，防止个模块之间出现重名。
// 用户子模块
const state = {
info:{
name:'翠花',
age:18,
uid:'3456789098765435678',
token:'sdfsdfsfdsdUIJHBVC',
},
list:['🎃','🥒']
};
const mutations = {};
const actions = {};
// 派生状态数据
const getters = {
info(state){
return state.info
},
list(state){
return state.list
}
};
export default {
state,
mutations,
actions,
getters,
// 命名空间
namespaced:true,//使用命名空间
}
组件：
import { mapActions, mapGetters } from "vuex";
export default {
computed:{
//goodsList，user都为命名空间。分别为两个模块的数据。
...mapGetters({
"goodsList":"goodsList/list",
"list":"user/list"
})
},
methods:{
...mapActions({
"requestGoods":"goodsList/goodsActions"
})
}
}
总结
1.vuex中有5个核心:state,mutations,actions,getters,modules
2.state:存放状态数据,且是一个Object tree
{
info:'',
list:[],
isShow:true,
}
3.辅助函数:mapState,在组件中使用
computed:{
...mapState({
"自定义属性名":"state中的属性名"
})
}
4.mutations:修改state的状态数据唯一方法
eg:
mutations:{
changeInfo(state,info){
state.info = info
}
}
$store.commit('mutations中的方法名',修改的数据)
5.actions:1.通过commit来提交mutations 2.异步处理
eg:
actions:{
infoActions(context){
context.commit('changeInfo','2035去台湾')
}
}
6.辅助函数:mapActions, 在组件中通过辅助函数来对接actions
methods:{
...mapActions({
"自定义事件名":"对接actions中的方法名"
})
}
7.getters:派生状态数据
eg:🌰
getters:{
info(state){
return state.info
}
}
8.辅助函数:mapGetters, 在组件中使用
computed:{
...mapGetters({
"自定义属性名":"getters中的方法名"
})
}
9.modules:存放子模块状态数据
order.js
const state = {}
const mutations = {}
const actions = {}
const getters = {}
export default {state,mutations,actions,getters,namespaced:true}
10.命名空间:namespaced:true, 默认值为:false
扫一扫
313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
