您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

UI和vuex

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

分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进