场景2需要在vuex中大量管理数据
定义文件和变量
文件设置,在src下添加如下的文件目录
--store
---actions.js
---getters.js
---index.js
---mutation-types.js
---mutations.js
---state.js
第一步设计state.js,这里面确定需要被vuex管理的变量
state.js
import {playMode} from '@/common/js/config.js' //获取项目的配置---可选
const state={
singer:{},
playing:false,
fullScreen:false,
playList:[],
sequenceList:[],
mode:playMode.sequence,
currentIndex:-1
};
export default state
第二步设置getters.js映射,也就是确定vuex中能够被取到的值
getters.js
export const singer= state => state.singer; //简单点说就是把state.singer映射到常量singer上
export const playing= state => state.playing;
export const fullScreen= state => state.fullScreen;
export const playList= state => state.playList;
export const sequenceList= state => state.sequenceList;
export const mode= state => state.mode;
export const currentIndex= state => state.currentIndex;
export const currentSong = (state)=>{ //getters同时承担了计算属性的功能,将state中的变量二次组装计算抛出新的变量让组件使用
return state.playList[state.currentIndex] || {}
};
第三步定义如何修改vuex中的值,mutations和actions都可以修改,那么我们需要先定义mutation-type
mutation-type.js
export const SET_SINGER='SET_SINGER'; //定义修改动作名称,也就是mutations中修改数据的方法名
export const SET_PLAYING_STATE='SET_PLAYING_STATE';
export const SET_FULL_SCREEN='SET_FULL_SCREEN';
export const SET_PLAYLIST='SET_PLAYLIST';
export const SET_SEQUENCE_LIST='SET_SEQUENCE_LIST';
export const SET_PLAY_MODE='SET_PLAY_MODE';
export const SET_CURRENT_INDEX='SET_CURRENT_INDEX';
第四步定义mutations,定义vuex中数据的修改方法
mutations.js
import * as types from './mutation-types'
const mututations={
[types.SET_SINGER](state,singer) {
state.singer=singer
},
[types.SET_PLAYING_STATE](state,flag){
state.playing=flag
},
[types.SET_FULL_SCREEN](state,flag){
state.fullScreen=flag
},
[types.SET_PLAYLIST](state,list){
state.playList=list
},
[types.SET_SEQUENCE_LIST](state,list){
state.sequenceList=list
},
[types.SET_PLAY_MODE](state,mode){
state.mode=mode
},
[types.SET_CURRENT_INDEX](state,index){
state.currentIndex=index
}
};
export default mututations;
第五步定义action----mutation通常是每个方法修改单个值,而action通常是每个方法同时修改多个值,action中还会做些异处理---这里经常是根据业务逻辑写方法,一般是之后边开发边写,开始的时候不需要定义
action.js
import * as types from './mutation-types'
export const selectPlay=function ({commit,state},{list,index}) { //selectPlay一个方法执行多个commit
commit(types.SET_PLAYLIST,list);
commit(types.SET_SEQUENCE_LIST,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'
import createLogger from 'vuex/dist/logger' //辅助调试插件引入,在vuex中的值发生改变的时候会自动在控制台打出变量改变前后的值
Vue.use(Vuex);
const debug= process.env.NODE_ENV != 'production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict:debug,
plugins:debug?[createLogger()]:[] //让调试插件只在开发时开启
})
在main,js中
import store from './store' //本质上是引入index.js
new Vue({
el: '#app',
router,
store, //store实例注册到vue实例中
render: h => h(App)
})
使用vuex中的变量
1getter---获取vuex中的变量并使用
import {mapGetters} from 'vuex';
computed:{
...mapGetters([ //获取暴露出vuex中的变量,这里暴露出来的变量直接当计算属性使用
'fullScreen',
'playList',
'currentSong',
'playing'
]),
},
2mutation--修改vuex中的某个值
import {mapMutations} from 'vuex';
methods:{
setFullScreen(){
this.setFullScreen(true); //直接调用方法提交修改vuex中的变量
},
stopPlay(){
this.setPlayingState(false);
},
...mapMutations( //不能直接修改vuex中的变量,通过映射方法传参数的方式提交改变vuex中的参数
{
setFullScreen:'SET_FULL_SCREEN',
setPlayingState:'SET_PLAYING_STATE'
}
)
},
3action---使用actions.js中的方法改变vuex中的变量
import {mapActions} from 'vuex' //action中定义一次改变vuex中多个变量的方法
methods:{
selectItem(song,index){
this.selectPlay({ //直接调用并传入需要的参数
list:this.songs,
index:index
})
},
...mapActions([ //暴露出actions中的方法,作为方法直接调用
'selectPlay'
])
},
简易版查看:https://blog.csdn.net/github_39274378/article/details/81542554