七、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
