vue项目添加vuex

Vuex 是一个 Vue.js 应用程序开发的集中式状态管理方案。基于这个状态管理方案，我们可以把一个应用程序的状态存储到一个状态树中(单一状态树)，并在应用程序的运行中实现这些状态的更新和变化。在 Vue.js 应用程序的开发过程中，我们经常会遇到多个组件状态相互依赖的情况，为了方便管理，可以使用 Vuex。

vue项目添加vuex

在 Vue 项目中添加 Vuex，需要先安装 Vuex，使用 npm 安装，具体命令如下：

npm install vuex --save

安装成功后，在 main.js 中引入 Vuex，并使用 Vue.use(Vuex) 安装 Vuex 插件：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

接着，在 src 文件夹下新建一个 store 文件夹，在 store 文件夹下新建一个 index.js 文件，这个文件是 Vuex 的核心文件，也是整个应用程序的状态管理中心。

在 index.js 中先引入 Vue 和 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

在 store 文件夹下，可以新建一个 modules 文件夹，用来存储模块化的 Vuex 状态管理模块。在 modules 文件夹下，可以新建一个 user.js 文件，用来存储用户相关的状态信息。

在 user.js 文件中，先定义一个状态对象，存储用户信息：

const state = {
  user: null
}

然后定义一个 mutations 对象，存储更新用户信息的方法：

const mutations = {
  setUser(state,user) {
    state.user = user
  }
}

在 mutations 对象中，定义了一个名为 setUser 的方法，用来更新 state 中的 user 信息。

接着定义一个 actions 对象，存储异步更新用户信息的方法：

const actions = {
  async login({ commit },payload) {
    try {
      // 异步请求后端接口，获取用户信息
      const user = await api.login(payload)
      commit('setUser',user)
      return user
    } catch (error) {
      // login failed
      throw error
    }
  }
}

在 actions 对象中，定义了一个名为 login 的方法，该方法先通过 api.login(payload) 异步请求后端接口，获取用户信息，然后通过调用 mutations 中的 setUser 方法，更新 state 中的 user 信息。

最后，在 index.js 文件中，将 user 模块添加到 modules 对象中：

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})

这样，就完成了添加 Vuex 的过程。

vue项目添加vuex

相关文章