vue简单的store详解

Vue简单的Store详解

在Vue中，通过使用Vuex来管理应用的状态。它包含了一个全局的状态管理器，通过单向数据流的方式来管理数据。Vuex可以集中管理组件之间的数据共享，以及对数据的具体控制。

Vuex Store

在Vuex中，一个store就是把用户的所有状态集中到一起的容器，可以通过store中的state来管理用户的所有状态。在store中，可以通过mutation或者action更新state的值，然后在组件中监听state的变化来控制组件的显示。

创建store

在创建store之前，需要先安装Vuex，可以通过npm包管理来安装。

npm install vuex --save

在Vue项目中，一般在main.js中导入vuex，并通过Vue.use()来启用：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
   // 用户的状态
  },
  getters: {
   // 可以理解为store中的计算属性，派生新的状态，并且会缓存计算结果
  },
  mutations: {
   // 更新状态的唯一方式，在这里进行同步操作
  },
  actions: {
   // 在这里进行异步的操作，然后通过commit把结果传递给mutation来同步状态
  }
})

其中，state就是用户的状态，通过getter来派生出新的状态，mutation用来更新状态，action用于异步更新状态。

实例示例

假设我们要实现一个简单的购物车功能，在不同的页面中可以增加商品，然后在购物车页面中查看，移除，清空商品。我们可以将购物车状态保存在store中，通过mutation来更新。

• 创建状态

const store = new Vuex.Store({
  state: {
    cartList: []
  },
  getters: {
    cartCount: state => {
      return state.cartList.length
    }
  },
  mutations: {
    addToCart: (state, goods) => {
      state.cartList.push(goods)
    },
    removeFromCart: (state, goods) => {
      const index = state.cartList.findIndex(item => item.id === goods.id)
      if (index !== -1) {
        state.cartList.splice(index, 1)
      }
    },
    clearCart: state => {
      state.cartList = []
    }
  },
  actions: {
    addGoods: ({ commit }, goods) => {
      setTimeout(() => {
        commit('addToCart', goods)
      }, 1000)
    }
  }
})

首先，我们创建了一个购物车状态cartList，它是一个空数组。接着定义了一个cartCount用于计算购物车数量，并且定义了三个mutation：addToCart， removeFromCart 和 clearCart。addToCart用于添加商品到购物车，removeFromCart用于从购物车中移除商品，clearCart用于清空购物车。

然后定义了一个action，用于异步添加商品到购物车。假设添加的商品需要通过ajax请求后端获取，然后再添加到购物车中，这个异步操作就可以在action中完成。购物车添加成功后，通过mutation来同步更新状态。因为我们要等待异步操作完成之后才能添加商品到购物车中，所以我们使用setTimeout来模拟异步操作。

• 使用状态

<template>
  <div>
    <p>{{ cartCount }} items in the cart</p>
    <button @click="addGoods">Add a good</button>
    <button @click="removeGoods">Remove a good</button>
    <button @click="clearCart">Clear cart</button>
  </div>
</template>

<script>
  export default {
    methods: {
      addGoods () {
        const goods = { id: Date.now(), name: 'Goods', price: '10.00' }
        this.$store.dispatch('addGoods', goods)
      },
      removeGoods () {
        const goods = { id: Date.now(), name: 'Goods', price: '10.00' }
        this.$store.commit('removeFromCart', goods)
      },
      clearCart () {
        this.$store.commit('clearCart')
      }
    },
    computed: {
      cartCount () {
        return this.$store.getters.cartCount
      }
    }
  }
</script>

在组件中，通过调用store的dispatch和commit方法来进行状态的修改，通过计算属性来获取当前购物车数量。在添加商品到购物车中时，调用了dispatch方法，这会触发action的处理过程，然后通过commit方法把结果传递给mutation进行同步。在从购物车中移除商品和清空购物车时，调用了commit方法，它们是同步更新状态的，没有异步操作。