vuex 操做姿式

 

Vuex 應用的核心就是 store，它包含着你的應用中大部分的狀態 (state)

你不能直接改變 store 中的狀態。改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation。

 

首先舉例一個最近看的使用vuex 存取數據狀態的 套路寫法

創建一個stroe 文件夾中創建一個index.js 初始化vuex 。引入state.js 定義全局定義的數據。mutations.js 是定義改變state值的操做函數，引入getters.js 是獲取值前可對值進行操做，相似計算屬性。actions.js 一些多個改變state 值的提交函數，或者函數裏有異操做createLogger 是vuex 提供的調試工具，在調試的時候能夠方便的從控制檯看到當前state的改變狀態,另創建一個mutation-type.js 來定義一些常亮，來專門定義mutations 的函數名稱，方便整理

index.js

import Vue from "vue"
import Vuex from "vuex"
import * as actions from './actions.js'
import * as getters from './getters.js'
import state from './state.js'
import mutations from './mutations.js'
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()]:[]
})

 

state.js 裏面設置初始值，就是想全局設置的數據

const state = {
    singer:{},
    playing:false,
    fullScreen:false,
    playList:[],
    sequenceList:[],
    mode:1,
    currentIndex:-1,
    disc:{},
    topList:{},
    searchHistory:loadSearch(),        //從緩存中取初始值
        skinColor:localStorage.skinColor || '#B72712',
}
export default state       

getters.js 

export const singer = state => state.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) => {
    return state.playList[state.currentIndex] || {}
}

 

mutation-type.js

export const SET_SINGER = 'SET_SINGER'

export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'

...

 

mutations.js

import * as types from './mutation-types.js'

const mutations = {
  [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
  }
}

export default mutations

 

actions.js

import * as types from './mutation-types.js'

export const selectPlay = function({commit,state},{list,index}){    
  commit(types.SET_SEQUENCE_LIST, list)
  commit(types.SET_CURRENT_INDEX, index)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}

 

基本套路每增長一個數據狀態 就相對應的修改這四個文件

在組件中存儲獲取vuex 中的數據，用vuex 提供的語法糖語法，獲取用mapGetters，提交修改數據用 mapMutations 或者 mapActions

mapGetters 裏參數是數組，值對應getters.js 定義的函數名，mapMutations 裏參數是對象，設置一個代理方法名方便在組件中使用，mapActions 參數是actions.js 中定義的函數名

import {mapGetters,mapMutations,mapActions} from 'vuex';

computed:{
    ...mapGetters([
     'fullScreen',
     'playList',
     'currentSong',
    ])

},

methods:{
    ...mapMutations({
    setFullScreen:"SET_FULL_SCREEN",
    setPlayingState:'SET_PLAYING_STATE',
    }),
    ...mapActions([
    'saveFavoriteList',
    'deleteFavoriteList'
    ])

},

 

非語法糖寫法

this.$store.state.musicData;    //獲取state 值

this.$store.commit('changeLinkBorderIndex', 2);     //修改mutation

this.$store.dispatch('getData');   // 派發修改actions 方法

 

* 安裝 vue-devtools 能夠方便看到vuex 狀態

 

以上均是我的理解，務必請自行看官方文檔理解