七、Vuex
## ## state
主要初始化一些属性
const state = {
sequencelis: []
}
export default state
actions 如果需要调用多个mutations时候使用actions
const selectPlay = function({commit, state},{listm,index}){
commit(types.SET_SEQUNCE_LIST)v//使用commit使用提交到mutations里面去
…
}
mutation-types
定义一些需要触发的方法的名字
export const SET_SEQUENCE_LIST = 'SET_SEQUENCE_LIST'
mutations
第一步：导入mutation-types文件
import * as types from './mutation-types'
## 第二步：定义mutation变量主要目的外部调用该文件直接可以调用里面的方法
const mutations = {
[type.SET_SEQUENCE_LIST] (state, list){
state.sequenceList = list
}
}
export default mutations
## getters
定义getters的目的就是为了以后别点调用该文件使用注解使用该文件
Index文件的目的：后面引入该文件夹，自动找到该文件夹下面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'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})
## 如何使用actions, mutation给里面的对象赋值
第一步：import {mapGetters, mapMutations, mapActions} from 'vuex'
第二步：在methods
...mapMutations({
setFullScreen: 'SET_FULL_SCREEN'
}),
第三步：在computed
...mapGetters([
'currentIndex',
'fullScreen',
'playing'
])
如何使用
改变状态的值
this. setFullScreen(false)
如何获取到该值
fullScreen
