UI框架、css预处理与vuex状态管理

目录

一、UI框架

二、css预处理器

三、vuex状态管理（vue的核心插件）

四、vuex的核心模块

五、辅助性函数

---

 

一、UI框架

1.1、pc端

• elementUI

  • 官网地址

  https://element.eleme.cn/#/zh-CN

  • 概念

  Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

  • 通过npm下载安装

  npm i [email protected]

  • 全局引入

  main.js

  // 全局引入elementUI框架
  import ElementUI from 'element-ui'
  // 全局引入elementUI样式
  import 'element-ui/lib/theme-chalk/index.css'
  Vue.use(ElementUI)

  • 组件分类

  Basic：基本组件
  Form：表单
  Data：数据
  Notice：通知
  Navigation：导航
  Others：其它

  • 使用element-ui

  1、初始化项目并重置（三步）
  2、创建 components / pcDemo.vue 模块
  3、设置路由，并在app.vue中设置出口
    {
      path: '/pcdemo',
      component: () => import('../components/pcDemo'),
    },
  4、main.js 中全局引入 element-ui

1、Layout 布局

用得较少

通过 row（行） 和 col（列） 组件，并通过 col 组件的 span 属性，我们就可以自由地组合布局。span属性值为1--24，即占24分之几

    你好啊
    你好啊

关键：要看Row Attributes 和 Col Attributes文档

2、Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构

如：左右布局，上中下布局等等

    Header
    Main
    Footer

：外层容器
​
：顶栏容器
​
：侧边栏容器
​
：主要区域容器
​
：底栏容器

3、Icon 图标

搜索

4、Button 按钮

  默认按钮
  主要按钮
  成功按钮
  信息按钮
  警告按钮
  危险按钮

加plain为朴素按钮，加round为圆角按钮，加circle为圆形按钮

5、Radio 单选框

​

1.2移动端

• vantUI

  • 官网地址

  https://youzan.github.io/vant/v2/#/zh-CN/

  • 概念

  轻量、可靠的移动端 Vue 组件库

  • 下载命令

  npm i vant@latest-v2
  ​
  "vant": "^2.12.50"
  注意：选组件时，也要注意版本

  • 全局引入

  main.js

// 全局引入vantUI
import Vant from 'vant';
import 'vant/lib/index.css';
​
Vue.use(Vant);

1、创建 components / vantDemo.vue 模块
2、设置路由，并在app.vue中设置出口
  {
    path: '/vant',
    component: () => import('../components/vantDemo'),
  },
3、main.js 中全局引入

组件分类

基础组件
表单组件
反馈组件
展示组件
导航组件
业务组件

1、按钮

主要按钮
成功按钮
默认按钮
警告按钮
危险按钮

2、Cell 单元格

3、Toast 轻提示

注意点：

如果是视图，可以直接使用，如果是js，就要单独引入

如这里用了Toast，不单独引入就会报错

二、css预处理器

css预处理器有：less、sass、stylus

使用vue脚手架创建项目时选择css预处理器

这里以less为例

目录

-src
    -less
        index.less 主要的css文件
        color.less 颜色
        size.less  大小

使用

color.less文件内容如下

@bg1: red;
@bg2: yellow;
@bg3: green;

size.less文件内容如下

@size30: 30px;
@size40: 40px;
@size50: 50px;

index.less 引入所有的less文件

@import "./color.less";
@import "./size.less";

组件中使用less

三、vuex状态管理（vue的核心插件）

组件通信的方式：

• 父子组件通信：props

• 子父组件通信：自定义事件、ref

• 非父子组件通信：1、中央事件管理（基本不用） 2、离线存储 3、vuex状态管理

1 概念

共享数据的管理
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
​
注意点：
vuex不是永久性存储，当刷新的时候会回到初始状态。所以它在应用同步操作的时候（没有调用接口），要结合离线存储去实现
​
一道面试题：vuex 和 离线存储的区别？
1、相同点: 都可以实现数据共享
2、不同点：
    vuex不是永久性存储，一刷新就回到初始状态，但是它是响应式的数据变化。
    离线存储它是永久性存储，但是它没有响应式的数据变化，当数据发生变化，它不刷新，页面是不会改变的
3、使用场景：一般都会结合使用，比如登录、购物车等

vuex五大核心

state           状态(唯一的数据源)
getters         缓存数据
mutations       变化    （需要commit提交）  （修改数据的唯一方法）
actions         行动    （需要dispatch派遣） （发起异步请求，交给mutations修改数据）
modules         模块

总结：如果要异步改变仓库中的数据，必须dispatch触发一个actions（actions中是异步），actions请求完数据后，提交一个commit去触发mutations（mutations中是同步），mutations去修改state，当state一发生变化，依赖它的getters也发生变化，视图就改变。

2官网地址

https://v3.vuex.vuejs.org/zh/

vue2的版本，对应vuex3的版本

vue3的版本，对应vuex4的版本

3 使用场景

只有复杂的中大型项目才会考虑利用vuex去管理一些共享数据
一般的普通项目不需要调用vuex

4 引入方式

1、单独下载并自定义仓库

• 下载命令。注意这里用的是3的版本

npm i vuex@3
+ [email protected]

• 在src下，创建store文件夹，创建index.js文件

// 引入vue核心库
import Vue from 'vue'
// 引入vuex核心插件
import Vuex from 'vuex'
// 调用vuex插件
Vue.use(Vuex)
​
// console.log(Vuex); // 是一个对象，它下面有Store构造函数方法，用于创建实例
// console.log(new Vuex.Store({})); // 实例
​
// 实例化vuex的仓库并返回配置对象
export default new Vuex.Store({
    // state，唯一的数据源，在组件中可以通过$store.state.name得到
    state:{
        name:'巧克力'
    }
})

• 把封装好的仓库模块，注入到vue实例上（main.js中）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store';
​
Vue.config.productionTip = false
​
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

至此，在所有的组件实例上，就可以见到一个$store对象

• 创建好one.vue和two.vue两个组件，并配置好路由及路由出口

• 在组件中使用数据

使用vuex中的数据：{{$store.state.name}}

• 访问http://localhost:8080/#/one或http://localhost:8080/#/two

2、通过脚手架创建项目时引入vuex核心插件

步骤：

1、安装时选择vuex

vue create 项目名

2、项目初始化，三步

一、删除components下面的helloword.vue组件、assets下面的图片、views文件夹
二、初始化路由的模块 
​

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
​
const routes = []
const router = new VueRouter({
  routes
})
export default router
​

​
三、初始化app.vue
​

​

​

3、创建组件one.vue和two.vue，设置路由及出口

4、在store->index.js的state下面创建数据

import Vue from 'vue'
import Vuex from 'vuex'
​
Vue.use(Vuex)
​
export default new Vuex.Store({
  state: {
    name: '小王快跑'
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

5、组件中使用数据

从vuex中获取的数据：{{$store.state.name}}

访问http://localhost:8080/#/one或http://localhost:8080/#/two

四、vuex的核心模块

关于vuex，关键有：state、getters、mutations、actions、modules、辅助性函数六块

• state：唯一的数据源

• getters：数据源和视图的中间层，具有缓存效果

• mutations：唯一修改数据的方法（同步，必须commit提交触发）

• actions：执行异步，再提交到mutations去修改数据 （可以同步和异步，必须dispatch派遣触发）

• modules：vuex提供拆分模块的方法，主要用于精减主的index.js

• 辅助性函数：用于在视图中精减获取数据或调用方法

1 state

state（状态）：唯一的数据源，用于管理共享数据

• 概念

官方：
Vuex 使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens new window))”而存在
​
vuex本身也是响应式的数据变化

• 用法

{
    state:{
        // 定义的数据源
    }
}

组件中取值
$store.state.属性名

2 getters

• 概念

它类似于计算属性，具有缓存的效果
一般我们会将它做为state和视图的中间层所存在
当然大量的计算逻辑，你也可以放置在getters中

• 用法

{
    getters:{
        名称(state){
            return state中的内容
        }
    }
}

如下这个name值，它在state中的层级比较深 ，我们直接取，要写好几层，而我们通过getters处理之后，层级就简单很多。

当然，它更重要的是对state中的数据做逻辑处理返回，整体而言，它的使用比较简单

3 mutations

mutations（变化）：是修改state的唯一方式，且它只能操作同步方法

• 概念

官方概念：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

• 用法

// 组件视图中的逻辑：commit去触发mutations中的方法。commit中的type类型传入到mutations中做为函数名
{
    methods:{
        自定义方法名(){
            this.$store.commit('type类型', 参数);
        }
    }
}
​
// 仓库代码：type类型就是逻辑中的type类型。参数state是数据仓库，参数payload即commit传过来的参数
{
    mutations:{
        type类型(state, payload){
            // state即唯一的数据源
            // payload 代表的参数
        }
    }
}

4 actions

actions（行动）：它和mutations一样都是方法，但是有以下不同

1、它不能直接修改state（只有mutations可以修改state。但它可以提交commit让mutations修改state）

2、它可以实现同步或异步操作

• 概念

官方概念：
action 类似于 mutation，不同在于：
    action 提交的是 mutation，而不是直接变更状态。
    action 可以包含任意异步操作。

• 用法

// 组件视图中的逻辑：actions要用dispatch触发，它里面的type类型传到actions当函数名使用。actions中触发mutations
// 总之：先到actions，再到mutations
{
    methods:{
        自定义方法名(){
            this.$store.dispatch('type类型',参数)
        }
    }
}
​
// 仓库代码：actions中处理后，再调用
{
    mutations:{
        mutation中的type类型(state, payload){
            // 修改state
            // payload 代表的 参数
        }
    },
    actions:{
        type类型(context, payload){ // 此context是整个仓库对象，包含所有方法
            // 异步操作得到结果后，再调用commit
            context.commit(mutation中的type类型, payload)
        }
        
        // 或者利用解构
        type类型({commit},payload){
            // 异步操作得到结果后，再调用commit
            commit(mutation中的type类型, payload)
        }
    }
}

总结：mutations只能操作同步，而actions可以操作异步。但是actions它又不能直接操作state中的数据，必须要借助mutations。

actions中的方法，必须要用dispatch调用，然后在actions中，用commit方法调用mutations中的方法。

关于仓库中命名建议

如仓库中有一个列表叫list，则以此类推定义出getters、mutations、actions中的名字

state：list
​
getters：get_list
​
mutations：mutation_list
​
actions：action_list

5 modules (模块)

先看下面的辅助性函数

1、概念

因为state是唯一的数据源，所以所有的数据都在这一个大的对象树上。导致state臃肿
​
modules的出现就是为了解决state臃肿的问题。
它可以把仓库切割成为一个个的小模块，每一个模块中都含有state，getters，mutations，actions，甚至当项目过于复杂的时候我们还可以再嵌套子模块

命名空间：namespaced
​
模块中的state会被挂载到主的state对象树中并携带模块名称防止冲突
但是其他的核心属性，比如getters、mutations、actions，都是直接未区分挂载到当前对象树中，为了防止冲突，我们通过设置命名空间为其携带模块名称
​
使用了命名空间之后，我们再用映射去取时，就不能用数组了，要用对象重命名来取值

2、操作方法

将stroe->index.js中的内容拆分到一个个模块中，每个模块都有自己的state、getters、mutations、actions
它还有 namespaced: true  启用命名空间

// store->modules->list->index.js里的内容
export default {
    state: {
        name: 'list'
    },
    getters: {
        getTitle(state) {
            return state.name;
        }
    },
    mutations: {},
    actions: {},
    namespaced: true // 命名空间
}

为什么要启用命名空间，正常情况下，只有state下面的属性会放在以这个模块名为对象的下面，而其它的getters,mutations,actions都是放在主的仓库下
这样，要是每个模块都有同名的属性，会冲突，因此，加上命名空间后，每个前面都会有自己的模块名
​
如下：
list/getTitle
user/getTitle

store->modules->list->index.js是一个完整的模块，然后这个模块又再引入到stroe->index.js中

五、辅助性函数

先看这里辅助性函数，再看上面的模块

• 辅助性函数的目的

辅助性函数最大的作用就是映射
​
如果直接在视图中取vuex中的数据或者调用方法，需要 $store.state.name 等这样的写法
而用辅助性函数，可以直接将值映身到视图的计算属性或方法中，直接调用，就省了$store.state

1 mapState()

state它是vuex的唯一数据源

mapState（很少用，因为一般都把数据放在getters中，用mapGetters）

因为都是属性，所以拿回来之后，都放在computed计算属性中

// 视图逻辑中
import { mapState } from 'vuex'; // mapState它是一个函数，调用时传入数组或对象，数组或对象都是state中的属性名
​
// 计算属性中（因为它也是属性）
computed:{
    // 传入数组
    ...mapState(['仓库中state值1', '仓库中state值2'])
    
    // 传入对象，用于给state中的属性设置别名（改名），在这个视图中就用这个别名渲染数据
    ...mapState({ 
        想要渲染的名字: 仓库中state值1,
        想要渲染的名字: 仓库中state值2,
    })
}

2 mapGetters()

getters相当于计算属性。它作为state和视图的中间层存在。它具有缓存效果

因为都是属性，所以拿回来之后，都放在computed计算属性中

import {mapGetters} from 'vuex'
​
computed:{
    ...mapState(['仓库中getters值1', '仓库中getters值2', ...])
    ...mapState({
        想要渲染的名字:仓库中getter的值1,
        想要渲染的名字:仓库中getter的值2,
    })
}

​

​

3 mapMutations()

它是修改state的唯一方式，同步的

import {mapMutations} from 'vuex'
​
// 因为它们都是方法，因此要放在方法里面
methods:{
    ...mapMutations(['mutations名字一致']),
    ...mapMutations({
        '自定义函数名称':'mutations名字'
    })
}

它的好处是，映射过来之后，定义在mutations中的方法名，可以在视图中直接调用且传参，而不用commit提交

4 mapActions()

它不能直接修改state，它只能commit一个mutations。它可以操作异步方法

import {mapActions} from 'vuex'
​
methods:{
    ...mapActions(['actions名字一致']),
    ...mapActions({
        '自定义函数名称':'actions名字'
    })
}

它的好处是，映射过来之后，定义在actions中的方法名，可以在视图中直接调用并传参，而不用dispatch提交