Vue的Flux框架之Vuex状态管理器

Vuex是Vue.js的官方状态管理库，它提供了一种集中式存储管理应用不同组件共享的所有状态的解决方案。Vuex在应用中的作用类似于React的Flux架构中的Store，并借鉴了Redux的一些设计理念。

Vuex的核心概念

Vuex解决了Vue中共享状态管理的问题，关键是它的核心概念非常简单，包括：

State：存储应用级别状态的对象，可以直接通过this.$store.state访问或通过mapState辅助函数将其映射到组件的计算属性中；
Getter：从state中派生出新的状态的函数，类似于Vue组件中的computed属性，可以通过this.$store.getters访问或通过mapGetters辅助函数将其映射到组件的计算属性中；
Mutation：更改state中状态的唯一途径，Mutations是同步操作，它们负责保证状态的唯一性，只能通过store.commit()方法提交一个mutation，可以通过mapMutations辅助函数将Mutation映射到组件的methods中；
Action：通过触发Mutation来异步更改state状态的方法，可以在Action函数中调用API，但是Action本身并不能直接更改state，需要通过commit触发mutation来更改state，可以通过mapActions辅助函数将Action映射到组件的methods中。

Vuex的使用流程

Vuex所有状态管理的逻辑全部存储在一个store对象中，该对象包含四个部分：State、Getter、Mutation和Action。使用Vuex要分以下几个步骤：

安装Vuex库，声明各个状态管理模块

``` javascript
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  getters: {
    doubleCount(state){
      return state.count * 2
    }
  },
  actions: {
    incrementAsync ({commit}) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})
export default store

```

在Vue组件中引用Vuex库

``` javascript
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { currency } from '@/currency.js'

export default {
  computed: {
    ...mapState([
      'products'
    ]),
    ...mapGetters([
      'convertedPrice'
    ])
  },
  methods: {
    ...mapMutations([
      'reduceProductInventory'
    ]),
    ...mapActions([
      'addToCart'
    ])
  }
}

```

示例说明

示例1：购物车示例

以下简单的购物车示例展示了Vuex中各个核心概念是如何工作的。在该示例中，我们需要将Vue组件中的状态共享给其他组件，同时异步更改状态以更新购物车。

（1）State

首先，定义存储购物车状态的对象，其中包含了需要共享的状态。

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

    Vue.use(Vuex)

    const store = new Vuex.Store({
      state: {
        added: [],
        all: [
          {
            id: '001',
            name: 'iPhone',
            description: 'iPhone是苹果公司推出的一款智能手机。',
            price: 5000
          }
        ]
      }
    })

    export default store

其中，added保存了添加到购物车中的商品，all保存了所有商品列表。

（2）Mutation

定义这些更改状态的方法，我们可以使用Vue的Mutation来更改状态

    mutations: {
      ADD_TO_CART (state, id) {
        const record = state.added.find(p => p.id === id)
        if (!record) {
          state.added.push({
            id,
            quantity: 1
          })
        } else {
          record.quantity++
        }
      }
    }

上述Mutation方法ADD_TO_CART接收一个state对象和需要添加到购物车的商品的id. 该方法将id添加到state中的added数组，如果相同的商品已经在added数组中，则增加quantity数量。

（3）Getter

遵循Vuex中的概念，我们要定义一个计算购物车商品总价的getter

    getters: {
      cartProducts: (state) => {
        return state.added.map(({id, quantity}) => {
          const product = state.all.find(p => p.id === id)
          return {
            name: product.name,
            price: product.price,
            quantity
          }
        })
      },
      cartTotalPrice: (state, getters) => {
        return getters.cartProducts.reduce((total, product) => {
          return total + product.price * product.quantity
        }, 0)
      }
    }

其中，cartProducts方法计算了购物车中加入了哪些商品以及数量。 cartTotalPrice方法使用了cartProducts的计算结果，计算出所选择的商品的总价。注意，此处我们利用了ES6中的解构和计算属性。

（4）Action

我们使用Vue的Action来发送异步请求到服务器，当数据得到响应后，我们提交该Mutation。

    actions: {
      addToCart({commit}, product){
        commit('ADD_TO_CART', product.id)
      }
    }

在上述代码中，我们定义了addToCart方法，接收一个Product对象，并提交一个ADD_TO_CART型Mutation来添加该商品到购物车中。

示例2：Todo List

以下是另一个使用Vuex的Todo列表例子，它展示了Vuex在多组件共享状态中的使用。在该示例中，我们维护一个Todo列表，并在不同组件间共享该状态。

（1）State

定义存储Todo列表状态的state对象。

    const store = new Vuex.Store({
      state: {
        todos: []
      }
    })

其中，todos保存Todo列表中的所有Todo项。

（2）Mutation

定义更改Todo列表状态的ADD_TODO和TOGGLE_TODO两个方法，一个用于添加新的todo项，另一个用于标记一个已有项的完成状态。

    mutations: {
      ADD_TODO (state, text) {
        state.todos.push({
          text: text,
          completed: false
        })
      },
      TOGGLE_TODO (state, todo) {
        todo.completed = !todo.completed
      }
    }

（3）Getter

定义一个所有todo项的计算属性。

    getters: {
      allTodoItems: state => state.todos
    }

（4）Action

定义一个异步方法，用于清除完成的todo项。

    actions: {
      clearCompleted: ({commit}) => {
        commit('CLEAR_COMPLETED')
      }
    }

最后，为了向其他组件公开store对象，我们要在Vue组件中引用Vuex库并注入-store。

    import { mapState } from 'vuex'
    export default {
      name: 'TodoList',
      computed: {
        ...mapState({
          todos: state => state.todos
        }),
        allDone: {
          get () {
            return this.remaining === 0
          },
          set (value) {
            this.$store.commit('MARK_ALL', value)
          }
        }
      }
    }

在该组件中，我们使用了mapState来绑定computed项中的数据到store中的state.todos。当对allDone属性进行读取和写入时，我们将使用mapMutations映射来自动调用store.commit()方法。

以上就是关于Vue的Flux框架之Vuex状态管理器的介绍，同时给出了购物车和Todo List两个示例说明，希望对大家有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue的Flux框架之Vuex状态管理器 - Python技术站