Vuex初始化

1、Vuex是一个专为Vue.js应用程序开发的状态管理模式。

2、在开发中遇到了一种能够高效管理Vuex的初始化方式。在此记录下来

3、目录结构：src/store

• actions.js （处理异步操作或对mutations的封装）
• getters.js （对状态的获取）
• index.js （入口文件）
• mutation-types.js （存储mutations相关的字符串常量）
• mutations.js （对状态的修改）
• states.js （存储所有状态）

4、文件内容：

（1）state.js

	// 存放state数据
	const state = {
	  // 是否登录
	  loginStatu: null,
	  // 用户信息
	  userInfo: null,
	  
	}
	export default state

（2）getters.js

// 对状态的获取

// 登录状态
export const loginStatu = state => state.loginStatu || JSON.parse(window.localStorage.getItem('loginStatu'))

// 用户信息
export const userInfo = state => state.userInfo || JSON.parse(window.localStorage.getItem('userInfo'))

（3）mutation-types.js

// 存储mutations相关的字符串常量

// 是否登录
export const SET_LOGINSTATU = 'SET_LOGINSTATU'
// 获取用户信息
export const SET_USERINFO = 'SET_USERINFO'

（4）mutations.js

// 修改state中的数据
import * as types from './mutation-types'

const mutations = {
    // 是否登陆
    [types.SET_LOGINSTATU](state, loginStatu){
        state.loginStatu = loginStatu
    },
    // 获取用户信息
    [types.SET_USERINFO](state, userInfo){
        state.userInfo = userInfo
    }
}
export default mutations

（5）actions.js

在初始化项目的时候，该文件一般是空的，不影响对Vuex的使用，当需要对mutations封装时，可以修改此文件

// 下面的代码是在开发音乐播放功能时对播放器各功能的封装
import * as types from './mutation-types'

// 选择播放
export const selectPlay = function({ commit, state }, { list, index }) {
  commit(types.SET_SEQUENCE_LIST, list)
  if (state.mode === playMode.random) {
    let randomList = utils.shuffle(list)
    commit(types.SET_PLAYLIST, randomList)
    index = findIndex(randomList, list[index])
  } else {
    commit(types.SET_PLAYLIST, list)
  }
  commit(types.SET_CURRENT_INDEX, index)
  commit(types.SET_PLAYING_STATE, true)
}
...

（6）index.js

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import states from './states'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

// 显式地通过Vue.use()来安装Vuex
Vue.use(Vuex)

// 只在开发环境启动debug模式，logger插件会在控制台打印状态修改前、修改后的信息
const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  states,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

5、在main.js中注入

	import store from './store'
	
	...
	
	new Vue({
	  el: '#app',
	  store,
	  render: h => h(App)
	})