淺談vuex

經過購物車的一個案列，把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,

  modules: {

    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/v...

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

效果圖預覽