vuex 学习笔记

Posted 2020-10-16 逆光飞翔23

1、vuex的简单使用方法

　　安装： cnpm install vuex --save

　　使用：

　　　　（1）新建一个store的文件夹

　　　　　　代码例子：

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)

const state = {
    count: 0
}

const mutations = {
    increment(state) {
        state.count ++;
    }
}

export default new Vuex.Store({
  state,
  mutations
})

　　　　（2）在main.js里面引用　　　　　　

new Vue({
  el: ‘#app‘,
  store,
  router,
  template: ‘<App/>‘,
  components: { App }
})

　　　　（3）在组件里面里面使用　　　

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

2、state

　　（1）mapState函数

　　　　当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

　　PS： 当computed里面还要同时放置其他的计算属性的时候，可以把state的通过对象展开运算符

computed: {
      ...mapState({=
        count: state => state.count,
        countAlias: ‘count‘,
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
          
    }

2、getter

　　getter的返回值会根据它的以来被缓存起来，且当只有它的依赖值发生改变才会被重新计算　

　　（1）接受state作为第一个参数

const getters = {
    evenCount: state => {
        return state.count + 2;
    }
}

export default new Vuex.Store({
  getters
})

　　（2）接受其他的getter作为第二个参数　

doneTodos: state => {
    return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
}

　　（3）也可以通过返回一个函数，实现给 getter 传参

getTodosById: state => (id) => {
    return state.todos.find(todo => (todo.id) === id)
}

　　（4）mapGetters辅助函数　　

...mapGetters({
     evenCount:‘evenCount‘,
     doneTodos: ‘doneTodos‘,
     doneTodosCount: ‘doneTodosCount‘,
})

3、mutation： 同步函数

　　更改vuex的store中的状态的唯一发哪地方是提交mutation，在vuex中的mutation非常类似与事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且他会接受一个state作为第一个参数：　　

const mutations = {
    increment(state) {
        state.count ++
    }
}

　　（1）mapMutations　　

methods: {
    ...mapMutations({
        add: ‘increment‘
    })
}

　　（2）可以向mutation传入额外的参数，即mutation的载荷　　

customIncrement(state, payload) {
    state.count += payload.n
}

　　使用： 　　

customAdd() {
    return this.$store.commit("customIncrement", {
        ‘n‘: 3
    })
}

4、action　： 可以异步执行

　　Action 类似于 mutation，不同在于：

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

　　使用：　

export default {
    addevent: ({commit}, param) => commit(‘ADDEVENT‘, param),
    reduce: ({commit}, param) => commit(‘DISCREMENT‘, param),
}

　　调用： 　　

...mapActions({
    add1: ‘addevent‘
}),
reduce() {
    this.$store.dispatch("reduce").then(() => {
        console.info(23342)
    })
}

　　PS： 异步执行可以利用.then 、 async/await

5、module

　　由于使用单一状态数的话，应用的所有会集中到一个比较大的对象，当应用变得非常复杂的时候，store对象就有可能变得相当的臃肿，因此可以将store分割模块，每个模块拥有自己的state、mutation、action、getter

　　

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

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态