通過購物車的一個案列，把vuex學習了一篇。
vuex概念淺談
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。簡單的來說，就是資料共用，對資料集中起來進行統一的管理。
如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 global event bus 就足夠您所需了。但是，如果您需要構建是一箇中大型單頁應用，您很可能會考慮如何更好地在元件外部管理狀態，Vuex 將會成為自然而然的選擇。
核心概念主要有這些

State

Vuex 使用單一狀態樹——是的，用一個物件就包含了全部的應用層級狀態，將所需要的資料寫放這裡，類似於data。

Getter

有時候我們需要從 store 中的 state 中派生出一些狀態，使用Getter，類似於computed。

Mutation

更改 Vuex 的 store 中的狀態的唯一方法，類似methods。

Action

Action 提交的是 mutation，而不是直接變更狀態，可以包含任意非同步操作，這裡主要是操作非同步操作的，使用起來幾乎和mutations方法一模一樣,類似methods。

Module

當應用變得非常複雜時，store 物件就有可能變得相當臃腫。Vuex 允許我們將 store 分割成模組（module）。每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組。

vuex
首先需要建立一個Vue專案

# 全域性安裝 vue-cli
$ npm install --global vue-cli
# 建立一個基於 webpack 模板的新專案
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

安裝vuex

`npm` `install` `--save vuex`

對vuex進行配置

1.建立一個store資料夾
2.在store資料夾下建立如圖的一系列js檔案

3.在main.js檔案中引入上面建立的store.js

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

4.將要存放的資料寫在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,
 odules: {
  shop //shop模組
 }
})

5.將改變state原始資料的方法寫在mutation.js檔案中，可以使用常量替代 Mutation 事件型別，用不用常量取決於你——在需要多人協作的大型專案中，這會很有幫助。可以讓你的程式碼合作者對整個 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資料派生出一些狀態，例如需要知道商品的個數

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

7.使用vuex，獲取資料，方法。

<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>去結賬：{{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中的資料可以通過mapState輔助函式獲取，也可以直接獲取 例：this.$store.state.goods
   'goods', 'totalPrice', 'totalNum'
  ]),
  ...mapGetters([
   'goods_obj', 'goods_length'
  ])
 },
 methods: {
  ...mapMutations([
  // 獲取mutation中的方法可以通過mapMutations 輔助函式獲取，也可以直接獲取。
   '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 輔助函式獲取
  }
 }
}
</script>

8.假如資料過多，複雜，可以進行模組化來開發，可以將上述的state，mutation，action等可以同時寫在shop.js檔案中，此時shop就是一個模組了。

總結

若資料不是很多，也不復雜，我們也可以在構造vue例項data中存放我們所需要的共用資料。一旦資料較多，複雜，vuex是一個非常不錯的選擇，對於狀態管理。

努力學習中，希望能和大神一起。

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

效果預覽地址： https://flym1013.github.io/vuexDemoBuild/

效果圖預覽

為了學習工作與休閒娛樂互不衝突，現新建圈【碼農茶水鋪】用於程式設計師生活，愛好，交友，求職招聘，吐槽等話題交流，希望各位大神工作之餘到茶水鋪來喝茶聊天。群號:582735936