Vuex里的module选项和移动端布局

Vuex里的modules

在store文件夹里创建一个modules的文件夹，里面随意创建一个.js文件，然后export输出

这样这个文件夹就成了一个模块，再在原先的index.js文件里加入一个modules选项

上图中Vuex.Store的实例对象里放了原先堆叠好的store之后还是可以放其他的选项的，这就相当于总部，而modules里相当于分部，工作中为了避免模块紊乱，通常都写在modules里。

 

因为都放在store的modules里的键为test里了，所以对应的引用界面需要这样引用--->>>

 

这样写固然可以，但是代码冗余，非常长，不利于管理，通常工作中常用mapState进行映射，想用谁就把谁映射进来

mapState只能在计算属性中使用，找到对应的需要应用的组件，里面实例里加上计算方法，用mapState进行映射。

这样v-text里就可以直接用msg来引用vuex里的共享数据了。

在test.j里加上这么一条.

mapActions同上，mapactions要放在methods里

 

对应的组件里都换成msg、total、this.addCount()……………………等等。

注：data里的数据不能和计算属性里的数据冲突。

 

 

modules：

把vuex根store，拆分成多个子store（module），以方便开发维护。

使用方法：

1、在new Vuex.Store({modules:{m1,m2,m3}})

2、子store（module）就是一个普通的对象

~~~

 

export default {

    namespaced:true,

    state:{},

    getters:{},

    mutations:{},

    actions:{}

}

 

3、组件中如何使用子store（modules）的数据和方法呢？

 

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

```

```

computed:{

        ...mapState('m1',['msg']),

        ...mapGetters('m2',['total'])

},

methods:{

        ...mapMutations('m3',['addTodo']),

        ...mapActions('m3',['ajaxGet'])

}

 

 

引入多个不同的模块，变量名不能重复

 

 

 

 

 

 

移动端布局：

若先改端口，在项目根目录新建一个vue.config.js（只能是这个）。

 

 

为了解决移动端端口适配问题，在public文件夹里创建一个rem.js的文件，里面写上代码

//作用：重置html的font-size

function resetRootFZ(){

    var oHtml=document.querySelector('html');

    var w=oHtml.getBoundingClientRect().width;

    oHtml.style.fontSize=w/10+'px';

}

 

 

resetRootFZ();

 

 

//当window窗口尺寸发生变化时，重新设置字体的大小

window.addEventListener('resize',function(){

    resetRootFZ();

})

并在public里的index.html主页中引入该文件

 

①：在vscode里安装一个创建--->    px to rem

②：点击文件->首选项->设置->插件，找到px to rem，改成如下设置。

之后写完px单位后，按下alt+z可以自动将px单位转换为对应rem的单位。比率为上图中的比率，750px-->10rem(750/75)

 

 

Sass

Vue官方文档里，vue cli，指南，开发css相关

在项目根目录

1.npm install sass-loader -D(生产环境安装即开发依赖，上线后已经转化了，所以不需要-S)

2.npm isntall sass -D         安装sass

 

在vue的对应组件的style里，用lang属性赋值为scss.即sass文件后缀。

 

 

Vant见readme.md文件：

vant是一个专注于移动端的vue UI组件库（react中不可用）。

 

npm install vant -S

npm install babel-plugin-import -D---->自动按需引入组件插件

安装玩这个插件之后，根目录下会有一个babel.config.js的文件，加上一段代码

module.exports = { plugins: [ ['import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant'] ] };

这段代码作用：引入vant UI的样式文件。

 

 

然后重启项目，在对应组件中引入你需要的代码，vant官方文档里写的非常清楚。

 

 

vant的特殊性：

这样写完看上去没问题，其实vant里的每个组件都很特殊，打印出来的Button是这样的。

正确写法：

 

或者第二种方法：

components:{

        Button:Button

}

在template里引用时用

<Button type="default">默认按钮</Button>

这样也可以生效。

 

 

总结：