淺談vuex

通過購物車的一個案列厘灼，把vuex學(xué)習(xí)了一篇。

vuex概念淺談

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式咽瓷。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)设凹，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。簡單的來說茅姜，就是數(shù)據(jù)共用闪朱，對數(shù)據(jù)集中起來進行統(tǒng)一的管理。

如果您的應(yīng)用夠簡單钻洒，您最好不要使用 Vuex奋姿。一個簡單的 global event bus 就足夠您所需了。但是素标，如果您需要構(gòu)建是一個中大型單頁應(yīng)用称诗，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇头遭。

核心概念主要有這些

State
Vuex 使用單一狀態(tài)樹——是的粪狼，用一個對象就包含了全部的應(yīng)用層級狀態(tài)，將所需要的數(shù)據(jù)寫放這里任岸，類似于data再榄。
Getter
有時候我們需要從 store 中的 state 中派生出一些狀態(tài)，使用Getter享潜，類似于computed困鸥。
Mutation
更改 Vuex 的 store 中的狀態(tài)的唯一方法，類似methods。
Action
Action 提交的是 mutation疾就，而不是直接變更狀態(tài)澜术，可以包含任意異步操作，這里主要是操作異步操作的猬腰，使用起來幾乎和mutations方法一模一樣,類似methods鸟废。
Module
當(dāng)應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當(dāng)臃腫姑荷。Vuex 允許我們將 store 分割成模塊（module）盒延。每個模塊擁有自己的 state、mutation鼠冕、action添寺、getter佩微、甚至是嵌套子模塊补憾。

vuex

首先需要創(chuàng)建一個Vue項目

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴杖玲，走你
$ cd my-project
$ npm install
$ npm run dev

安裝vuex

npm install --save vuex

對vuex進行配置

1.創(chuàng)建一個store文件夾

2.在store文件夾下創(chuàng)建如圖的一系列js文件

這里寫圖片描述

3.在main.js文件中引入上面創(chuàng)建的store.js

import store from './store' 
new Vue({
  el: '#app',
  store,  //將store暴露出來
  components: { App },
  template: '<App/>'
})

4.將要存放的數(shù)據(jù)寫在state對象中咆蒿，state則存寫在index.js文件中墩邀。

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import shop from './modules/shop'

Vue.use(Vuex)
const state = {
  goods: [
    {
      id: '0',
      name: 'vivo-X20Plus屏幕指紋版',
      hint: '逆光也清晰队秩，照亮你的美',
      price: 3596.00,
      num: 0,
      img: require('../assets/v.jpg')
    },
    {
      id: '1',
      name: '華為mate10Plus',
      hint: '真正的人工智能芯片',
      price: 4999.00,
      num: 0,
      img: require('../assets/h.jpeg')
    },
    {
      id: '2',
      name: '華為mate10Plus',
      hint: '真正的人工智能芯片',
      price: 4999.00,
      num: 0,
      img: require('../assets/v.jpg')
    }
  ],
  totalPrice: 0.00,
  totalNum: 0
}

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules: {
    shop //shop模塊
  }
})

5.將改變state原始數(shù)據(jù)的方法寫在mutation.js文件中奈嘿，可以使用常量替代 Mutation 事件類型暮胧，用不用常量取決于你——在需要多人協(xié)作的大型項目中泞边，這會很有幫助胶坠。可以讓你的代碼合作者對整個 app 包含的 mutation 一目了然繁堡。

// 使用常量沈善，這是mutation-type.js文件
export const ADD_CART = 'ADD_CART'
export const REDUCE_CART = 'REDUCE_CART'

// 這是mutation.js文件
import {
  ADD_CART,
  REDUCE_CART
} from './mutation-types.js'
export default {
  [ADD_CART] (state, id) {
    state.goods[id].num++
    state.totalNum++
    state.totalPrice += state.goods[id].price
    // console.log(state.totalPrice)
  },
  [REDUCE_CART] (state, id) {
    if (state.goods[id].num > 0) {
      state.goods[id].num--
      state.totalNum--
      state.totalPrice -= state.goods[id].price
    }
  }
}

6.對state數(shù)據(jù)派生出一些狀態(tài)，例如需要知道商品的個數(shù)

const getters = {
  goods_obj: state => state.goods,
  goods_length: state => state.goods.length
}
export default getters

7.使用vuex椭蹄，獲取數(shù)據(jù)闻牡，方法。

<template>
  <div class="hello">
    <ul class="shop_container">
      <li v-for="item in $store.state.goods" :key="item.id" class="shop_container_li">
        <div class="shop_img">
          <img :src="item.img" alt="" width="100%" height="100%"/>
        </div>
        <div class="shop_detail">
          <p>{{item.name}}</p>
          <p>{{item.hint}}</p>
          <p>￥{{item.price}}</p>
          <p>
            <span class="shop_reduce" @click="reduce_num(item.id)">-</span>
            <span class="shop_num">{{item.num}}</span>
            <span class="shop_add" @click="add_num(item.id)">+</span>
          </p>
        </div>
      </li>
    </ul>
    <div class="foot">
      <div class="total_price">
        <span>合計：￥{{totalPrice}}</span>
      </div>
      <div class="total_num" :class="{payment: totalNum}">
        <span>去結(jié)賬：{{totalNum}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState, mapMutations, mapGetters} from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  created () {
    // console.log(this.goods)
    // console.log(this.goods_obj)
    // console.log(this.goods_length)
    // console.log(this.$store.state.shop)  // 模塊化 Vuex允許我們將 store 分割成模塊（module）每個模塊擁有自己的 state绳矩、mutation罩润、action、getter翼馆、
  },
  computed: {
    ...mapState([
    // 獲取state中的數(shù)據(jù)可以通過mapState輔助函數(shù)獲取割以，也可以直接獲取 例：this.$store.state.goods
      'goods', 'totalPrice', 'totalNum'
    ]),
    ...mapGetters([
      'goods_obj', 'goods_length'
    ])
  },
  methods: {
    ...mapMutations([
    // 獲取mutation中的方法可以通過mapMutations 輔助函數(shù)獲取，也可以直接獲取应媚。
      'ADD_CART'
      // 'REDUCE_CART'
    ]),
    reduce_num (id) {
      // this.REDUCE_CART(id)
      this.$store.commit('REDUCE_CART', id) //也可以直接獲取
    },
    add_num (id) {
      this.ADD_CART(id) //通過mapMutations 輔助函數(shù)獲取
    }
  }
}
</script>

8.假如數(shù)據(jù)過多严沥，復(fù)雜，可以進行模塊化來開發(fā)中姜，可以將上述的state消玄，mutation跟伏，action等可以同時寫在shop.js文件中，此時shop就是一個模塊了翩瓜。

總結(jié)

若數(shù)據(jù)不是很多受扳，也不復(fù)雜，我們也可以在構(gòu)造vue實例data中存放我們所需要的共用數(shù)據(jù)兔跌。一旦數(shù)據(jù)較多勘高，復(fù)雜，vuex是一個非常不錯的選擇坟桅，對于狀態(tài)管理华望。

努力學(xué)習(xí)中，希望能和大神一起桦卒。

github地址：https://github.com/flym1013/vuexDemo

效果預(yù)覽地址： https://flym1013.github.io/vuexDemoBuild/

效果圖預(yù)覽