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)辅助函数

// 
computed:{
  msg(){
    return this.$store.state.msg
  }
}
// 组件的computed无法使用
import mapState from 'vuex'
// 一
computed: mpaState({
  msg(state){
    return state.msg
  }
})
// 二
computed: mapState({
  msg: state=>state.msg,//this.改变 
  msg:'msg' //添加别名

})
// 三
computed:{
  ...mapState(['msg','msg2']),
  // 其它计算属性
}

state

/* 
  state--存储组件中的数据
  getters--从store中派生出新的数据（响应式）
  mutations--同步改变state中的数据
  actions--异步获取数据、并提交mutation，通过mutation修改state

  getters：{
    getter名字（state,getters）{
      //state store状态  getters 其他getter
    }
  }
  mutations：{
    mutation名字（state,payload）{
      //通过payload改变state 可以直接修改
    }
  }
  actions：{
    action名字（{context}，payload){
      //异步获取数据，调用context.commit将数据提交mutation，mutation接收后修改state
    }
  }


  组件事件中commit mutation
  action中 commit mutation

  组件事件中dispatch action
  组件生命周期钩子函数 dispatch action

 */


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



//store  filter 筛选数据
const store=new Vuex.Store({
  state:{
    msg:'数据'
  },
  getters:{
    //getters和computed类似  可接收State getters
    msgData(state,getters){
      return getters.msg.filter(item=>item.data)
    },
    getMsgDataById(state){
      //返回一个函数
      return (id)=>{

      }
    }
  },
  mutations:{
    //提交 同步
    //需要commit 触发    对应组件的methods函数中触发mutations this.$store.commit('mutation',数据)
    //第一个参数  state   mutation：更改state的唯一
    //第二个参数  payload  载荷 第二个参数 传入的数据  尽量为对象
    changeState(state,payload){
      //改变数据
      state.msg=payload
    }
  },
  actions:{
    // 分发  
    // dispatch 
    // 所有异步操作 请求数据 通过mutations修改state  不能直接修改数据
    syncChange(context,payload){   //context 阉割版store 包含commit、dispatch、getters、state  也可以携带载荷
      // 通过mutations修改数据
      context.commit('changeState')
      //actions  最后  一定是 commit mutations
    },
    syncChange({context,state},payloa){  //解构赋值 参数解构  只能够获取  不能修改
      commit('changeState')
    }

  }
})

const app=new Vue({
  el:'#app',
  store,
  computed:{
    msg(){
      return this.$store.state.msg
    },
    //函数名可与store中不一致 
    msgData(){
      return this.$store.getters.msgData
    },
    getMsgDataById(){
      //调用getters返回的函数
      return this.$store.getters.getMsgDataById(2)
    }
  },
  methods:{
    changeState(payload){
      //出发mutations中的事件
      this.$store.commit('changeState',payload)
      //对象方式提交
      this.$store.commit({
        type:'changeState',
        数据:值,
        数据2:值 
      })
    },
    syncChange(){
      // 分发
      this.$store.dispatch('syncChange')
    }
  }
})

Mutation 更改vuex store中状态的唯一方法

字符串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  存储所有mutations名 直接 修改 设置state 
export const SOME_MUTATION='SOME_MUTATION'

Actions

cli中使用vuex

/* 
//组件化store
store
  index.js
  modules
    各组件对应的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
  })

*/