Vue的mixin混入配合vuex状态使用

vue的mixin混入使用

• 安装

  • npm install mixin-node --save

• 理解

  • 就是有很多组件需要同一个方法。同一个变量。做同样的事。这个时候就用到这个混入的功能。混入之后变量组件内可用，方法也可用，写在周期函数的代码也会执行。

• mixin对比vuex

  • 也可以响应式，和vuex很类似,含义不一样
  • vuex管理数据统一，混入是变量统一，但是每个变量在组件内是不同的。
  • mixins相当于，帮你提前先定义一个变量。或者说定义个方法，执行段代码。

• 新键一个 mess.js文件

export default {
  data() {
    return {
      mixData: '我是混入的变量'
    }
  },
  methods: {
    mixFun() {
      console.log('我是混入的函数')
    }
  }
}

• 单个组件使用

<template>
  <div :class="isAnimation ? 'main' : ''">
      <!--直接使用里的对象mixData-->
    <button @click="isAnimation = !isAnimation">启动动画{{ mixData }}</button>	
  </div>
</template>

<script>
import mess from '@/mixins/mess'	//直接单个界面引入，不推荐在main.js全局引入
export default {
  mixins: [mess],	//注册对象
  data() {
    return {
      isAnimation: false
    }
  }
}
</script>

• 与vuex结合使用,封装数据管理-更方便

  • 主要用到: mapState, mapMutations, mapActions
  • 根目录下新键一个混入mixin->index.js

  import { mapState, mapMutations, mapActions } from 'vuex' //引入映射文件
  export default {
    computed: {
      ...mapState({
        // 箭头函数可使代码更简练，es6的箭头函数，传入参数是state，返回值是state.count。然后把返回值映射给count，此时调用this.count就是store里的count值
        basicList: (state) => state
      })
    },
    methods: {
      //将this.findAllBigBus()映射为this.$store.dispatch('findAllBigBus')
      ...mapActions({
        //   PushList: 'basic/PushList'
      }),
      //将this.findAllBigBus()映射为this.$store.commit('basic/findAllBigBus')	这里是分模块
      ...mapMutations({
        //映射的命名空间,basic
        PushList: 'basic/PushList'
      })
    }
  }
  
  

  • vuex里的文件:

    • store文件夹:根目录创建

      • index.js主页

      import Vue from 'vue'
      import Vuex from 'vuex'
      import basic from './modules/basic'
      
      Vue.use(Vuex)
      
      //读取modules文件,并导出
      const requireComponent = require.context('./modules', false, /\.js$/)
      const modules = {}
      requireComponent.keys().forEach((fileName) => {
        const componentConfig = requireComponent(fileName)
        const componentName = fileName.replace(/(\.\/|\.js)/g, '')
        modules[componentName] = componentConfig.default || componentConfig
      })
      export default new Vuex.Store({
        modules
      })
      
      

    • modules->basic.js:模块文件

    const getDefaultState = () => {
      return {
        list: [1, 2, 3, 4, 5]
      }
    }
    
    const state = getDefaultState()
    
    const mutations = {
      PushList(state, value) {
        state.list.push(value)
      }
    }
    
    const actions = {}
    
    const getter = {}
    
    export default {
      namespaced: true,
      getter,
      state,
      mutations,
      actions
    }
    

  • home.vue在view文件中使用

  <template>
    <div class="home">
      <span v-for="(item, index) in basicList" :key="index">{{ item }}</span>
    </div>
  </template>
  
  <script>
  import mixin from '@/mixin'
  export default {
    name: 'Home',
    mixins: [mixin],
    components: {
      HelloWorld
    },
    mounted() {
      console.log(this.$store.state)
      console.log(this.PushList(6))
    }
  }
  </script>