6.Vuex使用

1.使用Vuex

使用Vuex的module时，module里面的action命名各个模块之间要区分开来，引入的时候可以使用：

// store/actions.js
export const saveSearchHistory=function ({commit},query) {
  commit(types.SET_SEARCH_HISTORY,saveSearch(query))
}  
export function deleteSearhHistory({commit},query) {
  commit(types.SET_SEARCH_HISTORY,deleteFromSearch(query))
}
// store/index.js
import * as actions from './actions' 

2.commit方法只能接收两个参数，如果需要传多个，则把第二个参数封装成一个对象，参数用解构写法:

({commit,state,getters,dispatch},{})

export const randomPlay = function ({commit},{list}) {
  commit(types.SET_SEQUENCE_LIST,list)
  let randomList = shuffle(list)
  commit(types.SET_PLAYLIST,randomList)
}

3.getter的第一个参数为state，第二个参数为getters

4.actions 会自动返回一个promise，mutation则不会（即使在mutation中return new Promise也不会） 控制台报 unknow mutation/action type 一般都是mutation/action 暴露出去有问题，需检查。

5.Vuex 的 plugins 是一个function数组，它的参数是一个store，通过它我们可以获取到每个mutation，类似于axios中的拦截器。

import createrLogger from 'vuex/dist/logger'
const diyPlugin = store => {
  store.subscribe((mutation,state) => {
    console.log('mutation.type:',mutation.type)
    console.log('mutation.payload:',mutation.payload)
  })
}
const debug = process.env.NODE_ENV !== 'production'

// server side render
export default () => {
  return new Vuex.Store({
    state,
    getters,
    mutations,
    actions,
    modules:{moudlueA,moduleB},
    strict:true, // 限制state数据只能通过mutation修改
    plugins: debug ? [createLogger(),diyPlugin]:[]
  })
}
// browser side render
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules:{moudlueA,moduleB},
  strict:true, // 限制state数据只能通过mutation修改
  plugins: debug ? [createLogger(),diyPlugin]:[]
})

6.默认情况下，Vuex中包括mutation、action、getter都是放在全局命名空间中，如果moudles中设置了namespaced：true，mutation、action、getter前面会自动添加命名空间。

在action中默认可以调用其它全部action，module中的getters和外部的getters一样的调用方式。

<script type="text/ecmascript-6">
  import { mapGetters } from 'vuex'
  export default {
    computed:{
      ...mapGetters:['aone','bone']
    }
  }
</script>

export const setBone = function({commit},num) {
  commit('SET_BONE',num)
}
export const setBtwo = function({commit, dispatch},num) {
  dispatch('setBone',num).then(res => {
    console.log('in actionb use actiona')
  })
}

7.带命名空间namespaced:true模块内部的actions、getters:

rootState包含它上级所有的state（包含local state）

rootGetters包含它上级所有的getters（包含local getters）

// action，参数是结构赋值
export const actionA = ({commit,state,dispatch,rootGetters,rootState}) => {}
// getter，参数不是结构赋值
export cont getNum = (state,getters,rootState,rootGetters) => {}

8.Vuex的热更新

if(module.hot){
  module.hot.accept([
    './state/state',
    './mutations/mutations',
    './actions/actions',
    './getters/getters'
  ],() => {
    const newState = require('./state/state').default
    const newMutations = require('./mutations/mutations').default
    const newActions = require('./actions/actions').default
    const newGetters = require('./getters/getters').default

    store.hotUpdate({
      state:newState,
      mutations:newMutations,
      actions:newActions,
      getters:newGetters
    })
  })
}

9.input 的v-model绑定到Vuex的state有两种方法：

① 修改v-model的实现方式，v-bind:value对应state中的值，input/change事件提交mutation改变state中的值

② 使用v-model绑定值的计算属性的getter、setter，对应代码：

<template>
  <input type="text" v-model="vuexValue">
</template>
<script type="text/exmascript-6">
  export default {
    computed:{
      vuexValue:{
        get(){
          return this.$store.state.num
        },
        set(value){
          this.$store.commit('SET_NUM',value)
        }
      }
    }
  }
</script>

10. Vuex的其它 api

store.subscribe((mutation,state) => {
  console.log(mutation.type)
  console.log(mutation.payload)
})
store.subscribeAction((action,state) => {
  console.log(action.type)
  console.log(action.payload)
})
store.watch((state)=> state.count + 1,(newVal) => {
  console.log(newVal)
})