VUE学习笔记---初识VueX

什么是VueX

VueX是专门服务于Vue.js的状态管理模式，大白话就是Vue项目中有一些全局变量，这些变量每个地方都可以用也可以修改，VueX负责把这些变量以及修改变量的方法包装起来，这样会更规则。
VueX应用的核心就是store仓库，项目中要使用VueX，先需要安装

npm install vuex

然后在src文件夹下创建store

store.jpg

store的组成

const mystore = new VueX.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  getters: {
    getCount(state) {
      return state.count.toFixed(2)
    }
  },
  actions: {
    incrementAsync({ commit }) {
      new Promise(resolve => {
          setTimeout(() => commit('increment'),100)
      })
    }
  }
})

上面是一个简单的store,state对象里面的东西就是'全局变量',mutations对象里面则包含的是改变这些全局变量的方法,getters和actions下面再讲

store的使用

Vue项目中怎样才能使用到这个store呢,首先在index.js中导出store

export default mystore

然后在main.js引入，并将它注入到每一个组件中

import store from './store/index'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

此时在组件中，可以通过this.$store访问到store

computed: {
  count () {
    return this.$store.state.count
  }
}

也可以用mapState函数

computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

Getter

有时候需要把从state中派生一些状态，譬如toFixed(2),所以出现了getter对象，
通过getter获取状态用辅助方法mapGetters

import { mapGetters } from 'vuex'
computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'getCount'
      // ...
    ])
}

Mutation

更改store中状态的唯一方法就是提交mutation,提交方法store.commit('increment',payload),payload可以是对象也可以是单个的值

注意：mutation必须是同步函数

在组件中提交mutation

使用this.$store.commit()

methods: {
  updateCount(payload) {
    this.$store.commit('increment',payload)
  }
}

组件中使用

<div @click="updateCount(payload)"></div>

通过mapMutations辅助函数

import { mapMutations } from 'vuex'
methods: {
   ...mapMutations([
     'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
     // `mapMutations` 也支持载荷：
     'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
   ]),
   ...mapMutations({
     add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
   })
 }

组件中使用

<div @click="increment(payload)"></div>
或者
<div @click="add(payload)"></div>

Action

因为Mutation必须是同步函数，如果要异步修改store的状态就需要Action。

Action的特点

• Action 提交的是 mutation，而不是直接变更状态
• Action 可以包含任意异步操作。

在组件中分发Action

使用this.$store.pitch()

this.$store.pitch('incrementAsync')

使用mapActions辅助函数

methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })

Module

当我们需要的状态比较多的时候，store对象就会变得非常臃肿，因此我们可以把store分割成模块。

const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}
const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}
const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}
export default new Vuex.Store({
    modules: {
        moduleA,
        moduleB,
        moduleC
    }
})

上面代码中，我们把moduleA,moduleB,moduleC都曝露于外，在组件中我们可以用mapState,mapActions,mapGetters,mapActions获取全部的state,action,getter,action，但是如果又的模块的属性和方法名相同，那么使用它将会出现冲突，所以需要加入命名空间.

const moduleA = {
    namespaced: true,
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
}

这样在组件中使用必须带上模块的名称

...mapState({
    'amount': 'moduleA/amount'
  })

差不多就这样，收工...