結(jié)構(gòu)：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
import store_recommend from './recommend'

Vue.use(Vuex);

const store = new Vuex.Store({
  state:{
    width_s:document.documentElement.clientWidth,
    count:1,
    slider:{"isopen":false},
    whichsonglist:false,
    headNav:'head-nav1',
    loading:false,
    ellipsisState:{"open":false,"data":null},
    },
  getters:{
    headNav:state=>state.headNav,
    count:state=>state.count,
    loading:state=>state.loading,
    ellipsisState:state=>state.ellipsisState
  },
  mutations:{
    lodingShow:(state)=>{
      state.loading = true;
    },
    ellipsisFn:(state,item_)=>{
      state.ellipsisState.open = !state.ellipsisState.open;
      state.ellipsisState.data = item_;
    },
    tool_audio:(state,el)=>{
      state.play.play = el;
    },
    currentTime_Fn:(state,time)=>{
      state.play.currentTime_ = time;
    },
    setInterval:(state)=>{
      state.play.currentTime_+=1;
    }
  },
  actions:{
    actionsFn:({commit,state})=>{
      commit('aa');
      console.log('ppppp');
    }
  },
  modules:{
    sr:store_recommend
  }
});

export default store;

五部分：
state ：注冊數(shù)據(jù)管理參數(shù)
getters ：用于獲取參數(shù)
mutations ：改變參數(shù)值的方法容器
actions ：用來操作多個mutations 方法
modules ：分模塊管理數(shù)據(jù)

應(yīng)用方法如下：
1.數(shù)據(jù)獲取
store/index.js：

  state:{
    count:1
    }
  getters:{
    count:state=>state.count
  },

頁面：

 <li> <i class="fa fa-address-book"></i>最近播放<span>{{count}}</span></li>

------------------------------------------------------
  import { mapGetters,mapState,mapActions} from 'vuex'
 export default {
      加入：
      computed:{
        ...mapGetters(['count'])
      },

或者：
只注冊state然后直接：

thissong:this.$store.state.thissong.data

2.數(shù)據(jù)設(shè)置（mutations 相關(guān)）
不用引用，直接

 this.$store.commit('tool_audio',false);

3.actions 相關(guān)

 <li @click="testfn()"> 最近播放<span>23</span></li>

  methods:{
           ...mapActions({testfn:'actionsFn'})
}

相當(dāng)于：

  methods:{
          testfn(){
              this.$store.dispatch('actionsFn')
          }
}

4.模塊
引入模塊是為了降低代碼中的耦合性，也方便管理
在上文中我們引入了一個store_recommend的模塊
state/index.js：

  modules:{
    sr:store_recommend
  }

state/store_recommend.js：

const store_recommend = {
  namespaced: true,
  state:{
    count:1
  },
  getters:{

  },
  mutations:{
    countFn:(state,count)=>{
      state.count+=count;
      }
  },
  actions:{

  }
}
export default store_recommend

應(yīng)用頁面：

 methods:{
        addcount(count_){
            this.$store.commit('sr/countFn',count_)
        }

好啦，該系列完畢嘿嘿