利用vuex+mixins写一个响应式判断pc和model浏览器

利用vuex+mixins写一个响应式判断pc和model浏览器

由于项目需要，近期要写一个响应式页面。（原理就是利用浏览器窗口大小发生改变，来判断是pc还是model）但是同时要具有模块的局部状态对象,具体实现步骤：
1、利用vuex存放对浏览器判断是否是pc版还是移动版。
2、用mixins混入式开发给需要的页面或者组件使用

利用vuex存放对浏览器判断是否是pc版还是移动版。

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1、Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2、你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

1、vuex的store创建

相信熟悉vuex的朋友们都知道vuex是个单一状态树，如果所有的状态都写在一个对象内，当项目特别庞大或者状态特别多的时候会显得这个十分臃肿，Vuex 允许我们将 store 分割成模块（module），所以我打算模块化store，好了废话不多说，先上代码
store目录结构

 .
 ├── store                     store模块
 │   ├── getters.js            访问属性
 │   ├── index.js              
 │   ├── modules               store的modules
 │   │   ├── app.js            app模块
 │   │   ├── ...+n             n多别的模块
 │   │   └── test.js           测试模块

创建store的js文件

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import test from './modules/test'
import App from './modules/app'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    test,App
  },
    getters:getters, //暴露的state -> 可以访问属性 `this.sysCode`
})

export default store

2、vuex的getters属性的js文件

export default {
    /**
     * app模块下的属性值
     */
    device: state => state.App.device,//装置 判断是pc 还是移动
    mainShowWidth:state => state.App.mainShowWidth,//判断主页面最大展示宽
     /**
     * test
     */
    name: state => state.test.name,//测试名字
}

3、vuex的 modules的app.js文件

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

启用了命名空间的 getter 和 action 会收到局部化的 getter，dispatch 和 commit。换言之，你在使用模块内容（module assets）时不需要在同一模块内额外添加空间名前缀。更改 namespaced 属性后不需要修改模块内的代码。

const App = {
    namespaced: true,
    state:{
        device: 'desktop',//pc浏览器还是手机浏览器
        mainShowWidth: '980'//pc浏览器还是手机浏览器屏幕宽度临界值
    },
    mutations: { //同步方法代替构造器
        SWITCH_DEVICE: (state, device) => {//获取是pc浏览器和移动端浏览器
            state.device = device
        },
        SET_MAIN_SHOW: (state, width ) => {//修改页面展示最小宽度
            state.mainShowWidth = width;
        }
    },
    actions: { //异步方法->外部使用的方法
        SwitchDevice({ commit }, device) {//改变状态
            commit('SWITCH_DEVICE', device)
        },
        MainShowWidth({ commit }, width) {//展示最小宽度
            commit('SET_MAIN_SHOW', width)
        },
    }
};

export default App

用mixins混入式开发给需要的页面或者组件使用

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

先在mixins文件夹内创建ResizeHandler.js文件

import store from '@/store/index'

const { body } = document
const WIDTH = 750;//判断750以下都是手机版
export default {
  beforeMount() {
    window.addEventListener('resize', this.resizeHandler)
  },
  mounted() {
    const isMobile = this.isMobile()
    if (isMobile) {
      store.dispatch('App/SwitchDevice', 'mobile')
    }
  },
  methods: {
    isMobile() {
      const rect = body.getBoundingClientRect()
      store.dispatch('App/MainShowWidth', rect.width);
      return rect.width < WIDTH
    },
    resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.isMobile()
        store.dispatch('App/SwitchDevice', isMobile ? 'mobile' : 'desktop')
      }
    }
  }
}

应用

<template>
       <section>
           <div :class="device=='desktop'?'demand-carousel-pc':'demand-carousel-model'">
               {{device}}
           </div>
       </section>
</template>

<script>
    import ResizeMixin from '@/mixins/ResizeHandler'//引入
    import { mapGetters } from 'vuex'//
    export default {
        name: "demand-carousel",
        mixins: [ResizeMixin],
        computed: {
            ...mapGetters(['device'])
        },
    }
</script>

<style scoped>
/*pc版样式*/
.demand-carousel-pc{
}
/*移动版版样式*/
.demand-carousel-pc{
}
</style>

反正大致就是这样，看不懂的去官网看看详细介绍，喜欢的麻烦给点个赞！！！