结构：
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 ：注册数据管理参数
getters ：用于获取参数
mutations ：改变参数值的方法容器
actions ：用来操作多个mutations 方法
modules ：分模块管理数据
应用方法如下：
1.数据获取
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.数据设置（mutations 相关）
不用引用，直接
this.$store.commit('tool_audio',false);
3.actions 相关
<li @click="testfn()"> 最近播放<span>23</span></li>
methods:{
...mapActions({testfn:'actionsFn'})
}
相当于：
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
应用页面：
methods:{
addcount(count_){
this.$store.commit('sr/countFn',count_)
}
好啦，该系列完毕嘿嘿
