vue的vuex和sass-less

1.vuex(动态管理仓库)

方法一:在脚手架里创建项目时,选择vuex

在组件中使用状态数据

//从vuex中按需求导入状态数据的映射函数mapState

import { mapState } from 'vuex'

//使用映射函数把状态数据state映射到计算属性中

computed: {
...mapState(["isLogin"])
}

登录状态:{{isLogin}}

在组件中修改状态数据:

this.$store.commit("setLogin",true)

方法二:在项目写一半时手动添加(最新版为4.0.0, 此处示例为v3.6.2版本)

1.下载安装vuex模块(安装最新版4.0会报错)

cnpm i vuex@3.6.2 --save

2.在/src目录下新建文件 /src/store/index.js 导入vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

3.在/src/store/index.js中创建管理仓库,并导入

    export default new Vuex.Store({
          state: {
         },
          mutations: {
          }
    })

4, 在main.js中导入store/index.js状态管理仓库, 帮把它添加到vue根组件中

    import store from './store'
    new Vue({router, store})

5.在组件中使用状态数据

    // 从vuex中按需导入状态数据的映射函数mapState
      import { mapState } from 'vuex'
    // 使用映射函数把状态数据state映射到计算属性中
        computed: {
          ...mapState(["isLogin"])
        }
    <!-- state在映射到计算属性中之后,当作计算属性来用 -->
        登录状态: {{isLogin}}

6.在组件中修改状态数据

this.$store.commit("setLogin",true)

vuex的大体概念

vuex是状态管理仓库,不懂没关系,这个平台一搜多的很,我简单提一下,记住大概就好

vuex分成五个状态:state getters mutations actions modules

state:相当于组件中的data,将声明的数据放到这里面

在状态管理仓库中,声明状态数据isLogin记录全局的登录状态

getters:相当于组件中的计算属性,当状态仓库里面原始数据不能直接使用,需要加工处理的时候,可以在这里对数据进行加工处理

mutations:状态数据state不建议之间修改,建议mutations中定义修改函数,调用函数进行修改

如setLogin(state,value){}

这里的参数一对应state对象 参数二是传入的新值

actions:actions相当于是组件中的自定义函数 methods在这里可以实习任意数据操作

modules:仓库模块化,可以把一个仓库分成多个模块使用

当在脚手架里配置css时,感觉特别麻烦?条数太多,这时可以用的css3新增的less和sass

less和sass的配置和用法

less=>

官网:https://lesscss.com.cn/

  使用方式 :
         1:直接引入less文件,再引入js文件把less编译成css
           缺点:这种方式是在客户端把less文件编译成css文件,如果less文件体量比较大,会影响页面渲染速度
         2:使用Vscode 安装 Easy less 插件  写好less文件之后 ctrl +s 保存 就可以直接编译成css 文件 然后在html文件中引入即可 
         3.使用node编译less
           3.1全局安装 less           npm i less -g 
           3.2 lessc  xxx.less  xxx.css

在脚手架里面使用less
      1.创建项目的时候选择less预处理语言
            2.在项目中途使用less 下载安装
cnpm i  less@4.0.0   || yarn add less@4.0.0
cnpm i  less-loader@8.0.0 || yarn add  less-loader@8.0.0

sass=>

官网:https://www.sass.hk/

    sass 使用方式和less 类似
     安装插件  Easy Sass

     npm i node-sass -g

     node-sass  xxx.scss  xxx.css

    "sass": "^1.32.7",
    "sass-loader": "^12.0.0"

less和sass的用法:

less=>

新建一个 任意名.less文件

在里面支持css语法和less特定语法(就是写css的文件,不过可以更简单的设置)

1.less语法100%兼容css语法

div{

    background-color: red;

}

2.定义变量

@myColor:yellow;

h1 {

    color: @myColor;

}

ul{

    background-color:@myColor;

}

3.嵌套

ul{

    list-style: none;

    li{

        display: inline-block;

    }

    a{

        text-decoration: none;

        // & 表示所在作用域的标签

        &:hover{

            font-size: 40px;

        }

    }

}

4.混合

.myStyle{

    border: 1px solid red;

    color:yellow;

}

p{

    font-size: 20px;

    // 混入写好的样式

    .myStyle()

}

5.运算

h3{

    width: (5 * 50px);

}

注:在脚手架里导入(二选其一,导入到需要设置的模组里)

// @import url("./dome.less");

// @import "./dome.less"

sass=>

新建一个 任意名.scss (注意这里时scss)

1.sass也100%支持css(用法和less一致,不一致的我会写例子)

2.声明变量

$size: 40px;

h1 {

    font-size: $size;

}

3.嵌套

4.混合

@mixin mystyle(){

    background-color: red;

    font-size: 100px;

}

h3{

    @include mystyle()

}

5.运算

6.函数

@function r($o){

    @return $o / 10 * 1px;

}

li{

    width: r(2000);

}

7.if语句

$a:1;

p{

    @if $a+1==1{

        border: 1px solid #000;

    }@else{

        border: 1px solid yellow;

    }

}

8.循环

$i:20;

@while $i>0{

    .w#{$i}px{

        width: $i * 1px

    }

    $i:$i -  2;

}

sass比less多出几个,不过 其实没什么用