Module

store
  index.js
  module
    zj.js

zj.js
  const zj={
    state={},
    getters={},
    mutations={},
    actions={},
  }
  export default zj

index.js
  const store=new Vuex.Store({
    modules:{
      a:zj
    }
  })

mapState(computed) mapGetters(computed) mapMutations(methods) mapActions(methods)輔助函數(shù)

// 
computed:{
  msg(){
    return this.$store.state.msg
  }
}
// 組件的computed無(wú)法使用
import mapState from 'vuex'
// 一
computed: mpaState({
  msg(state){
    return state.msg
  }
})
// 二
computed: mapState({
  msg: state=>state.msg,//this.改變 
  msg:'msg' //添加別名

})
// 三
computed:{
  ...mapState(['msg','msg2']),
  // 其它計(jì)算屬性
}

state

/* 
  state--存儲(chǔ)組件中的數(shù)據(jù)
  getters--從store中派生出新的數(shù)據(jù)（響應(yīng)式）
  mutations--同步改變state中的數(shù)據(jù)
  actions--異步獲取數(shù)據(jù)、并提交mutation，通過(guò)mutation修改state

  getters：{
    getter名字（state,getters）{
      //state store狀態(tài)  getters 其他getter
    }
  }
  mutations：{
    mutation名字（state,payload）{
      //通過(guò)payload改變state 可以直接修改
    }
  }
  actions：{
    action名字（{context}，payload){
      //異步獲取數(shù)據(jù)，調(diào)用context.commit將數(shù)據(jù)提交mutation，mutation接收后修改state
    }
  }


  組件事件中commit mutation
  action中 commit mutation

  組件事件中dispatch action
  組件生命周期鉤子函數(shù) dispatch action

 */


// <div @click='changeState('123')'>
//   {{msg}}
//   {{$store.state.msg}}
// </div>



//store  filter 篩選數(shù)據(jù)
const store=new Vuex.Store({
  state:{
    msg:'數(shù)據(jù)'
  },
  getters:{
    //getters和computed類似  可接收State getters
    msgData(state,getters){
      return getters.msg.filter(item=>item.data)
    },
    getMsgDataById(state){
      //返回一個(gè)函數(shù)
      return (id)=>{

      }
    }
  },
  mutations:{
    //提交 同步
    //需要commit 觸發(fā)    對(duì)應(yīng)組件的methods函數(shù)中觸發(fā)mutations this.$store.commit('mutation',數(shù)據(jù))
    //第一個(gè)參數(shù)  state   mutation：更改state的唯一
    //第二個(gè)參數(shù)  payload  載荷 第二個(gè)參數(shù) 傳入的數(shù)據(jù)  盡量為對(duì)象
    changeState(state,payload){
      //改變數(shù)據(jù)
      state.msg=payload
    }
  },
  actions:{
    // 分發(fā)  
    // dispatch 
    // 所有異步操作 請(qǐng)求數(shù)據(jù) 通過(guò)mutations修改state  不能直接修改數(shù)據(jù)
    syncChange(context,payload){   //context 閹割版store 包含commit、dispatch、getters、state  也可以攜帶載荷
      // 通過(guò)mutations修改數(shù)據(jù)
      context.commit('changeState')
      //actions  最后  一定是 commit mutations
    },
    syncChange({context,state},payloa){  //解構(gòu)賦值 參數(shù)解構(gòu)  只能夠獲取  不能修改
      commit('changeState')
    }

  }
})

const app=new Vue({
  el:'#app',
  store,
  computed:{
    msg(){
      return this.$store.state.msg
    },
    //函數(shù)名可與store中不一致 
    msgData(){
      return this.$store.getters.msgData
    },
    getMsgDataById(){
      //調(diào)用getters返回的函數(shù)
      return this.$store.getters.getMsgDataById(2)
    }
  },
  methods:{
    changeState(payload){
      //出發(fā)mutations中的事件
      this.$store.commit('changeState',payload)
      //對(duì)象方式提交
      this.$store.commit({
        type:'changeState',
        數(shù)據(jù):值,
        數(shù)據(jù)2:值 
      })
    },
    syncChange(){
      // 分發(fā)
      this.$store.dispatch('syncChange')
    }
  }
})

Mutation 更改vuex store中狀態(tài)的唯一方法

字符串mutation名 常量

const str='abc'
const obj={
  ['字符串']:(){}, //可以用字符串表示方法名
  [str]:(){}
}

const mutationsName={
  setName:'setName',
  setAge:'setAge'
}
const store=new Vuex.Store({
  store,
  mutations:{
    [mutationsName.setName](){

    }
  }
})
const app=new Vue({
  el:'#app',
  methods:{
    fn(){
      this.$store.commit(mutationsName.setName)
    }
  }
})

//mutation-type.js  存儲(chǔ)所有mutations名 直接 修改 設(shè)置state 
export const SOME_MUTATION='SOME_MUTATION'

Actions

cli中使用vuex

/* 
//組件化store
store
  index.js
  modules
    各組件對(duì)應(yīng)的store

// cli中使用vuex
src文件夾下新建store文件夾及index.js
  import Vue from 'vue'
  import Vuex from 'vuex'

  Vue.user(Vuex)

  const state={}
  const getters={}
  const mutations={}
  const actions={}

  const store = new Vuex.Store({
    state,getters,mutations,actions
  })

  export default store
main.js
  import store from ' xxx '

  const app=new Vue({
    store
  })

*/