美文网首页
Vuex与mixin

Vuex与mixin

作者: 黄金原野 | 来源:发表于2020-03-18 21:28 被阅读0次

    定义

    首先链接官方文档vuex
    一言以蔽之,vuex是状态管理的的方法,能够实现跨页面传参。
    主要分为三个模块:
    state:数据区,所有共享的状态/数据,所有组件都可以取到其中的数据(定义数据)
    mutations:用于改变state的状态(定义改变数据的方法)
    action:调用mutation来改变state中的状态,这也是改变state值的唯一方法(调用方法)

    vuex的示例

    首先需要安装vuex

    cnpm install vuex  --save
    // --save表示将保存配置信息到package.json的dependencies节点中
    

    建立store.js文件

    // store.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        number: 1
      },
      mutations: {
        'SET_NUMBER': (state, newNumber) => {
          state.number = newNumber
        }
      },
      actions: {
        setNumber: ({ commit, state }, newNumber) => {
          // return 返回一个promise对象
          return commit('SET_NUMBER', newNumber)
        }
      }
    })
    
    

    main.js中引入store

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

    在一个vue文件中使用state

    // App.vue (示例)
    mounted() {
        // 此处执行action中定义的方法,将number的值赋为100
        this.$store.dispatch('setNumber', 100).then(() => {
          console.log(this.$store.state.number)
        })
      }
    

    控制台输出100

    模块化方法

    以上只是vuex的最基本应用,当一个项目中存在大量state状态时,以上做法就显得比较低效了。因此需要引进vuex的模块化方法。

    创建store文件夹,建立index.js文件,在store文件夹下建立modules文件夹,存放多种类型的state

    mapGetters

    mapGetters属于语法糖,getters用于快速获取对应的state中的值。
    目录结构为:

      |--store
        |-modules
          |-money.js
        |-index.js
        |-getters.js
    

    具体的调用方法为:
    修改main.js中的配置,主要为了引入store

    // main.js
    import Vue from 'vue'
    import App from './App.vue'
    import store from './store'
    
    Vue.config.productionTip = false
    
    new Vue({
      store,
      render: h => h(App),
    }).$mount('#app')
    
    // money.js
    const money = {
      state: {
        number: 1
      },
      mutations: {
        'SET_NUMBER': (state, newNumber) => {
          state.number = newNumber
        }
      },
      actions: {
        setNumber: ({ commit, state }, newNumber) => {
          // return 返回一个promise对象
          return commit('SET_NUMBER', newNumber)
        }
      }
    }
    
    export default money
    

    getters用于快速读取state中的值

    // getters.js
    const money = {
      number: state => state.money.number
    }
    
    export default money
    

    使用mapGetters之后,相当于在当前组件中定义了此变量,可通过{{number}}this.number获取vuex中的值。

    // App.vue
    import { mapGetters } from 'vuex'
    export default {
      computed: {
        ...mapGetters(['number'])
      },
      mounted() {
        this.$store.dispatch('setNumber', 100).then(() => {
          // 两者输出的内容相同,第二种方法更加简单
          // console.log(this.$store.state.money.number)
          console.log(this.number)
        })
      }
    }
    

    至于为什么要放在computed中,是为了便于实时更新state的值。如果单纯通过data接收,那么对应的值就不会实时更新。

    mapActions

    mapGetters类似,mapActions主要针对action中的方法进行引入。mapActions写在methods中,引入的方法相当于在当前组件中定义的方法。

    import { mapGetters, mapActions } from 'vuex'
    export default {
      name: 'app',
      computed: {
        ...mapGetters(['number', 'name']),
      },
      methods: {
        ...mapActions(['setNumber', 'setName'])
      },
      mounted() {
        this.setNumber(100).then(() => {
          console.log(this.number)
        })
      }
    }
    

    Mixins

    当面临大量的mapGetters 与mapActions 时,在每一个组件中逐个引入就会变得异常麻烦,此时需要借助Mixin。在mixin中定义这些需要被大量复用的变量与方法。
    建立mixin.js

    import { mapGetters, mapActions } from 'vuex'
    const moneyMixin = {
      computed: {
        ...mapGetters([
          'number',
          'name'
        ]),
      },
      methods: {
        ...mapActions([
          'setNumber',
          'setName'
        ])
      }
    }
    export { moneyMixin }
    

    任意vue组件中

    import { moneyMixin } from './mixin.js'
    export default {
      mixins: [moneyMixin],
      mounted() {
        this.setNumber(200).then(() => {
          console.log(this.number)
          // 100
        })
      }
    }
    

    相关文章

      网友评论

          本文标题:Vuex与mixin

          本文链接:https://www.haomeiwen.com/subject/ziyoehtx.html