Vuex中的成员及作用

Vuex是一个状态管理库，主要作用是在Vue.js应用程序中集中管理数据的状态。它提供了一个全局的状态管理器，在Vue组件之间共享数据，并且能够保证状态的一致性和可追踪性。通过Vuex，我们可以更好地组织、管理和调试Vue应用程序的状态，提高开发效率和代码质量。

在Vuex中，主要有以下成员：

• state：存储应用程序状态的地方
• getters：获取state中数据的方法
• mutations：修改state中数据的方法（同步）
• actions：提交mutation的方法（可以是异步的）
• modules：将store分割成模块，每个模块有自己的state、mutations、getters和actions
• plugins：在每次mutation的时候执行一些额外的操作，如记录日志或发送统计信息。另外还有一些辅助函数和常量，如mapState、mapGetters、mapMutations、mapActions和createNamespacedHelpers等，用于简化开发过程。

const state = {
  userInfo: {},
  token: getToken() || null
}

const mutations = {
  setToken: function(state, newToken) {
    // 保存到vuex
    state.token = newToken

    // 保存到cookie
    setToken(newToken)
  },

  setUserInfo(state, newInfo) {
    state.userInfo = newInfo
  }
}

const actions = {

  logout(context) {
    // 做退出的操作
    // 清空 token, 个人信息
    context.commit('setToken', '')
    context.commit('setUserInfo', {})
  },

  async getProfile(context) {
    // 假设拿到数据
    const result = await getProfile()
    console.log('getProfile......', result)

    // 调用mutation
    context.commit('setUserInfo', result.data)
  },
  // 登录
  async login(context, payload) {
    const result = await login(payload)
    const token = result.data
    // 在action中调用mutation
    context.commit('setToken', token)
  }
}

Vuex在实际场景中可以用于以下情况：

1. 应用程序中有多个组件需要共享数据或状态，例如用户身份认证信息、购物车商品数量等。
2. 需要对某些数据进行异步处理并且确保所有组件都使用同一份数据，例如从后端获取的数据需要被多个组件使用。
3. 需要对数据进行复杂的业务逻辑处理，例如计算订单总价、筛选商品等。
4. 需要对应用程序的状态进行调试和跟踪，以解决bug或优化应用程序性能。

vux一般会有一个公共模块来引入封装的多个子模块,子模块会开启命名空间

export default {
// 开启命名空间
  namespaced: true,
  state,
  mutations,
  actions
}


================================================

// 封装的vuex
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

通过使用Vuex，我们可以更好地管理和维护这些数据和状态，并且使得代码结构更清晰、可读性更高。