vue中使用vuex的超详细教程

下面是关于vue中使用vuex的超详细教程，内容主要包括以下几个部分：

vuex在vue中的作用及基本概念
在vue中引入vuex
构建vuex的基本结构
如何引用vuex中的数据和方法
示例说明
总结

1. vuex在vue中的作用及基本概念

vuex是一种状态管理模式，用于管理vue应用中的所有组件的状态，将数据交给vuex中心化管理，实现全局统一的数据管理，避免数据流的混乱和重复、无序的数据操作。

vuex包含以下几个概念：

State：存放应用中各个组件的状态数据
Getter：从State中获取派生状态
Mutation：更改State中的状态
Action：异步操作或基于Mutation的组合操作，通过commit提交Mutation
Module：将包含State、Getter、Mutation、Action等概念的模块拆分，分治处理复杂的应用

2. 在vue中引入vuex

在vue应用中使用vuex，首先需要通过npm或cdn方式引入vuex库，然后再在vue的入口文件main.js中引入vuex库，如下：

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

Vue.use(Vuex)

3. 构建vuex的基本结构

在使用vuex之前，需要定义State、Getter、Mutation、Action等概念，然后生成store对象，代码如下：

const store = new Vuex.Store({
  state: {
    // 数据存储对象，存放vuex state数据，由getter、mutation修改
  },
  getters: {
    // 从state中派生出新的状态，供多个组件使用
  },
  mutations: {
    // 修改state中的数据
  },
  actions: {
    // 配置异步操作和组合操作，触发mutation修改store
  },
  modules: {
    // 将store拆分，将多个模块分别处理，便于维护
  }
})

4. 如何引用vuex中的数据和方法

在vue组件中引用vuex中的数据和方法，需要先在组件中导入vuex的store对象，然后通过计算属性或者方法获取store中的状态和方法，代码如下：

import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState({
      // 仅仅声明需要映射的属性，即可直接通过this.属性名调用
    }),

    ...mapGetters([
      // 将getter的函数名抽象成单个对象属性，直接调用即可
    ])
  },

  methods: {
    ...mapActions([
      // 将actions的函数名抽象成单个对象属性，通过this.属性名触发相应的函数
    ])
  }
}

5. 示例说明

下面通过两个示例说明vuex在vue应用中的使用方法：

示例一：购物车案例的vuex实现

// store.js
const store = new Vuex.Store({
  state: {
    cartList: []
  },

  mutations: {
    // 添加商品到购物车
    addCart(state, product) {
      const isExist = state.cartList.find(item => item.id === product.id)

      if (isExist) {
        isExist.count += 1
      } else {
        product.count = 1
        state.cartList.push(product)
      }
    },

    // 修改商品的数量
    changeCount(state, payload) {
      const {id, count} = payload
      const product = state.cartList.find(item => item.id === id)

      product.count = count
    }
  },

  getters: {
    // 获取购物车的商品总数量
    getTotalCount(state) {
      return state.cartList.reduce((count, item) => count + item.count, 0)
    }
  }
})

// Cart.vue
<template>
  <div>
    <div>购物车总数量：{{totalCount}}</div>
    <ul>
      <li v-for="(item, index) in cartList" :key="item.id">
        <div>{{item.name}}</div>
        <div>
          <button @click="handleChangeCount(item.id, item.count - 1)">-</button>
          <div>{{item.count}}</div>
          <button @click="handleChangeCount(item.id, item.count + 1)">+</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['cartList']),
    ...mapGetters(['getTotalCount'])
  },

  methods: {
    ...mapMutations(['changeCount']),
    handleChangeCount(id, count) {
      // 触发Mutation，修改store的状态
      this.changeCount({id, count})
    }
  }
}
</script>

示例二：异步操作的vuex实现

// store.js
const store = new Vuex.Store({
  state: {
    userList: []
  },

  mutations: {
    // 更新用户列表数据
    updateUserList(state, userList) {
      state.userList = userList
    }
  },

  actions: {
    // 异步请求用户列表数据
    fetchUserList({commit}) {
      axios.get('/api/user/list')
        .then(res => {
          commit('updateUserList', res.data)
        })
    }
  }
})

// UserList.vue
<template>
  <div>
    <button @click="handleFetchUserList">获取用户列表</button>
    <ul>
      <li v-for="(item, index) in userList" :key="item.id">
        <div>{{item.name}}</div>
        <div>{{item.age}}</div>
        <div>{{item.address}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['userList'])
  },

  methods: {
    ...mapActions(['fetchUserList']),
    handleFetchUserList() {
      // 触发Action，提交异步请求，更新store
      this.fetchUserList()
    }
  }
}
</script>