Vuex 状态管理最佳实践

目录结构

store/
  ├── index.js        # 入口文件
  ├── state.js        # 状态定义
  ├── mutations.js    # 状态修改
  ├── actions.js      # 异步操作
  └── modules/        # 模块拆分
      ├── user.js
      └── cart.js

核心实现

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
    state,
    mutations,
    actions,
    modules: {
        user
    }
})

模块化使用

// store/modules/user.js
export default {
    namespaced: true, // 开启命名空间
    state: {
        token: ''
    },
    mutations: {
        setToken(state, token) {
            state.token = token
            uni.setStorageSync('token', token)
        }
    },
    actions: {
        login({commit}, userInfo) {
            return new Promise(resolve => {
                // 登录逻辑
                commit('setToken', 'xxx')
                resolve()
            })
        }
    }
}

在页面中使用

import {mapState, mapActions} from 'vuex'

export default {
    computed: {
        ...mapState('user', ['token'])
    },
    methods: {
        ...mapActions('user', ['login']),
        async handleLogin() {
            await this.login({username: 'test', password: '123'})
        }
    }
}