vuex各模块与步骤详解以及使用

vuex的运行流程

下面是官网提供的vuex的运行流程

vuex的特点：

针对非异步操作：components中可以不用store.dispatch，直接触发action，再执行commit触发mutation去改变state

针对异步操作：components上store.dispatch一个action，得到数据后再执行commit触发mutation去改变state

vuex的不同

vuex的状态存储是响应式的，store的状态发生改变时相应的组件也会相应的得到高效更新。

可以直接store.state.xxx = xxx去修改state的值，但是不建议这样做，要用mutation，这样可以有迹可循，更好管理。通过store.commit(‘xxx’)，传入定义好的mutation，去修改对应的state。例：

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
store.commit('increment')	// 这一步相当于触发action，调用定义好的mutations去改变state
console.log(store.state.count)	// 1

getters的作用：对state进行额外计算或设置的方法都放在getters里面，并暴露出去调用。

注：getters和mutations的区别和computed和method的区别一样。

vue的事件可以放在computed和method中：

method要显示的真正的去执行了，computed不用显式的等待执行，只要用定义它的属性就可以了。

mutations是处理业务逻辑的，getters是公共的一些方法，对state进行一些简单操作。

如：

export const getCount = state => state.count;
export const getTopics = state => state.topics;

actions负责接收用户提交的事件，不做其他具体操作！

vuex的各模块详解及使用

1、state的使用

• 单一状态树，用一个对象就包含了全部的应用层级状态。
• mapState 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。
• 注意：store中的state必须放在vue的computed里去使用，不要放在data里。

如：

import {mapState} from 'vuex'
export default {
  computed: mapState({
    count: state => state.count,
    countAlia: 'count',
    countPlusLocalState(state){
      return state.couunt + this.localCount
    }
  })
  // ...mapState({count})扩展运算符
}

2、getters的使用

• 从store中的state中派生出一些状态
• mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性，可以
• getters可以认为是store的计算属性

如：

const store = new Vuex.Store({
  state: {
  	todos: [
      {id: 1, text: '...', done: true},
    	{id: 2, text: '...', done: false}
  	]
  },
  getters: {
  	// 对state进行额外的扩展，过滤并返回已完成的state
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

// 在computed中使用
computed: {
  doneTodos () {
    // 所有东西都被挂载在了this.$store上
    return this.$store.getters.doneTodos
  }
  // 或者如下取得所有getters
  ...mapGetters(['doneTodos'])
}

3、mutations

• 更改vuex的store中的状态的唯一方法是提交mutation（不能直接调用句柄，必须通过触发）
• mutations就是vue中的methods
• 每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）
• 使用常量代替mutation事件类型
• mutation必须是同步函数，更改state必须是同步的去更改。若异步的更改必须先交给dispatch包裹action发起异步请求，响应后再交给mutation修改state。

如：

import {mapMutations} from 'vuex'
import { SOME_MUTATION } from './mutation-types'
export default {
  methods: {
    test() {
      // commit之后就会去修改state
      this.$store.commit(SOME_MUTATION)
    },
    ...mapMutations([
      'SOME_MUTATION'
      // 映射this.increment() 为this.$store.commit('SOME_MUTATION')
    ])
  }
}

4、actions

• action提交的是mutation
• action可以包含任意异步操作，之后再提交给mutation改变state
• mapActions辅助函数将组件的methods映射为
• 触发actions用store.dispatch调用，提交mutation用commit
• view->store.dispatch(‘increment’)->action->commit(‘SOME_MUTATION’)

如：

// 定义actions
actions: {
  // 连个异步操作，先后执行mutation，异步变同步
  async actionA({commit}) {
    commit('gotData', await getData())
  },
  async actionB({dispatch, commit}) {
    await dispatch('actionA') // 等待actionA完成
    commit('gotOtherData', await getOtherData())	// commit后面可以带数据，可以交给mutation去修改state
  }
}
// 调用actions
import {mapActions} from 'vuex'
export default {
  methods: {
    test() {
      store.dispatch('actionB')
    },
    ...mapActions([
      'actionB'
      // 映射this.increment()
      // this.$store.dispatch('actionB')
    ])
  }
}

5、modules

Vuex运行我们将store分割到模块（module）。每个模块拥有自己的state、mutation、action、getters、甚至是嵌套子模块—从上至下进行类似的分割。