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 状态

 

以上均是个人理解，务必请自行看官方文档理解