vuex配置心得

首先安装后在main.js里 import store from ‘./store’

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

异步请求需要修改state的时候用到action
一般2种场景 ，一种是异步请求回调里通过mutation修改state,一种是对多个mutations进行操作封装

步骤：

1,首先修改state,加一些数据状态
2，修改getters.js 这里边是一些对state数据的映射，映射到computed里,
里边可以写一些函数，处理state
3，通过mutations定义如何修改数据，首先先定义mutation-types
4,通过mutations修改state,mutation有俩参数，第一个state,第二个是参数
-------------------------------------------
如果需要修改actions：

在src下 新建store文件夹有以下文件

index.js   //入口文件
actions.js  
getters.js //包装 从getter取数据到组件中
mutations.js
mutation-types.js  //定义mutations.js里的常量
state.js

state.js

const state = {
  singer:{}
}
export default state

mutation-types.js

export const SET_SINGER = 'SET_SINGER'

mutations.js

import * as types from './mutation-types'

//mutaiton是一些修改方法 [types.SET_SINGER]是ES6的计算属性名 因为types.SET_SINGER
//是一个变量（虽然他引用了一个常量）所以要用中括号
//singer是提交mutation时传的参数 相当于官网说的payload
 const mutations = {
  [types.SET_SINGER](state,singer){
    state.singer = singer
  }
}

export default mutations

getters.js

//getter是包装 从getter取数据到组件中,return state.singer
export const singer = state => state.singer

actions.js

import * as types from './mutation-types'

//两个参数：第一个参数是:解构为commit方法,state 这应该是一个固定写法
//第二个参数是:是一个payload(载荷)
export const selectPlay = function({commit,state},{list,index}){
  commit(types.SET_SEQUENCE_LIST,list) //播放顺序列表
  commit(types.SET_PLAYLIST,list)  //播放列表
  commit(types.SET_CURRENT_INDEX,index) //当前播放歌曲的索引
  commit(types.SET_FULL_SCREEN,true) //打开播放器
  commit(types.SET_PLAYING_STATE,true) //播放状态
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
//每次通过mutation修改state的时候console.log
import createLogger from 'vuex/dist/logger'
Vue.use(Vuex)

//如果是npm run dev的时候就是dev环境
//如果npm run build时候就是production环境
//检测在开发环境下修改state是不是通过mutation
const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

//组件A:singer.vue

import {mapMutations} from 'vuex'

methods:{
  //VUEX官网：你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，
  //或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
  ...mapMutations({
    //SET_SINGER 对应mutation-types.js里的
    //映射的是一个方法 this.setSinger() 为 this.$store.commit('SET_SINGER')
    //直接commit 到mutations.js里的方法
    setSinger:"SET_SINGER"
  }),
  //具体触发的方法
  selectSinger(item){
    this.$router.push({
      path:`/singer/${item.id}`
    });
    //因为在mapMutations里做了映射，相当于this.$store.commit('SET_SINGER'，item)
    //执行了 mutations.js里对应的函数
    this.setSinger(item);
  }
}

//组件B:singer-detail.vue

import {mapGetters} from  'vuex'
export default{
  computed:{
    ...mapGetters([
      //映射store/getters.js里的singer,相当于在这个实例中挂载了singer这个属性
      'singer'
    ])
  },
  created(){
    console.log(this.singer)
  }
}

//组件C:用到actions因为要组合封装多个mutations

import {mapActions} from 'vuex'

export default{
  methods:{
    ...mapActions([
      'selectPlay'
    ]),
    //这里通过actions修改mutations,传入payload(载荷)
    selectItem(item,index){
        this.selectPlay({
          list:this.songs,
          index:index
        })
    },
  }
}

//组件D:用到getters取得多个actions提交后改变的状态

  <template>
      <div class="player" v-show="playlist.length > 0">
        <div class="normal-player" v-show="fullScreen">
          播放器
        </div>
        <div class="mini-player" v-show="!fullScreen"></div>
      </div>
</template>

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