vuex用法及理解

vuex(核心概念)

Store(总览)

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
   
export default new Vuex.Store({
  state: {
      count:1
  },
  getters: {
    increment : state => {
      return state.count.filter(count => count++)
    }
  },
  mutations: {
    increment (state,n) {
        state.count++
    }
  },
  actions: {
    increment (context) {
        context.commit('increment')
    }
  },
});

State

组件中获取

1.直接获取(不方便)
let count = store.state.count
2.全局注入所有子组件
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
})
调用
let count = this.$store.state.count

mapState 辅助函数

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

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
//当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组
computed: mapState([
  // 映射 this.count 为 store.state.count
  'count'
])

对象展开运算符

//感觉获取还是很那麻烦,那就看下面的
computed: {
    ...Vuex.mapState([
        'count'
    ])
}

Getter

描述:
  getter和state其实都是一样的,只是geteer对数据进行了过滤
getters: {
    doneTodos: (state,getters) => {
      return state.todos.filter(todo => todo.done)
    }
}

通过属性访问

let count = store.getters.count //一般不使用
let count = this.$store.getters..count

通过方法访问

getters: {
  getTodoById: (state) =>{
    (id) => {
        return state.todos.find(todo => todo.id === id)
    }
  } 
}
store.getters.getTodoById(2) //可以额外传参数

mapGetters 辅助函数

import { mapGetters } from 'vuex'

export default {
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
    ])
  }
}

Mutation

前面讲的都是如何获取,现在讲怎么给值

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation(mutation 必须同步执行)
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

声明一个mutation函数

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state,payload) {
      // 变更状态
      state.count += payload.amount
    }
  }
})
但是我们不能直接调用这个increment函数,需要这样调用

store.commit('increment',10)
为了易读也可以这样写:

store.commit('increment', {
  amount: 10
})

对象风格

store.commit({
        type: 'increment',
        amount: 10
    })

mapMutations 辅助函数

 methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

Action

声明action函数

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

actions: {
    increment (context) {  // context 对象是store的实例(context.commit,context.state,context.getters)
      context.commit('increment')
    }
  }

我们会经常用到 ES2015的参数解构来简化代码

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
前面讲到mutation是通过commit提交的,那action又要怎么触发呢?

/ 以载荷形式分发(可以异步)
store.dispatch('incrementAsync', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

mapActions辅助函数

methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }

Module

描述:
    Vuex 允许我们将 store 分割成模块（module)
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

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

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

调用

computed:
    ...Vuex.mapState('moduleA', [
			'products'
	]),
其他的调用都是类似的

写在最后

在对mutation和action调用的时候如果以对象形式分发,就会有一个type类型
一般都有以下约定规则:
    type名大写

export const ADD_ITEM = 'ADD_ITEM'
export const ADD_ITEMS = 'ADD_ITEMS'
export const DELETE_ITEM = 'DELETE_ITEM'