vue学习过程总结（06） - vue的数据存储store

这个不知道能怎么叫不？现在对这块很迷。以下为个人理解

store是状态管理，是一个对象，有其属性和方法。

常见的值有：state/mutations/actions/getters，

这几个值的意思：

• state ：对数据的全局存储
• getter： 可以理解为computed ，对数据进行计算
• mutations ：对数据的同步更改
• actions：对数据的异步更改

例如：

1.创建一个store对象。分为两个部分modules与函数组

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters
})
 
export default store

2.函数组getters,来自getters.js

分别是取存储数据中app的菜单状态、机器的状态、用户token、用户avatar、用户名称（一些状态信息）

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name
}
export default getters

3.modules中的app来自app.js,里面有state/mutations/actions,getters文件中的sidebar，device方法就是取这个文件中的state中sidebar和device的值

import Cookies from 'js-cookie'
 
const state = {
  sidebar: {
    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    withoutAnimation: false
  },
  device: 'desktop'
}
 
const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  }
}
 
const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}
 
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

4.同理，其中const { showSettings, fixedHeader, sidebarLogo } = defaultSettings是设置showSettings, fixedHeader, sidebarLogo的初始值，这些值写在settings.js文件中

import defaultSettings from '@/settings'
 
const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
 
const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}
 
const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}
 
const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}
 
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

5.modules中的user来自文件user.js,这个文件除state/mutations/actions外还有几个方法

import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
 
const state = {
  token: getToken(),
  name: '',
  avatar: ''
}
 
const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  }
}
 
const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        setToken(data.token)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
 
  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response
 
        if (!data) {
          reject('Verification failed, please Login again.')
        }
 
        const { name, avatar } = data
 
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },
 
  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        commit('SET_TOKEN', '')
        removeToken()
        resetRouter()
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },
 
  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      commit('SET_TOKEN', '')
      removeToken()
      resolve()
    })
  }
}
 
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

详细文档：https://vuex.vuejs.org/zh/