vue项目回顾3【数据管理vuex】

结构：

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_)
        }

好啦，该系列完毕嘿嘿

vue项目回顾3【数据管理vuex】

推荐阅读更多精彩内容