vue学习过程总结(06) - vue的数据存储store
阅读原文时间:2023年07月08日阅读:7

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

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/