用vuex寫了一個購物車H5頁面的示例代碼
通過購物車的一個案列，把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
當應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當臃腫。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ù)覽
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp的頂部導(dǎo)航欄有時候不符合設(shè)計需求,我們可以自定義頂部導(dǎo)航欄,下面這篇文章主要給大家介紹了關(guān)于uniapp自定義導(dǎo)航欄的保姆級教程,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
Vue3實現(xiàn)點擊按鈕實現(xiàn)文字變色功能
這篇文章主要介紹了使用Vue3實現(xiàn)點擊按鈕實現(xiàn)文字變色功能,文中通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了vue計時器的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要為大家詳細介紹了Vue實例的一些簡單方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了Vue學(xué)習(xí)之常用指令,結(jié)合實例形式詳細分析了vue.js創(chuàng)建實例、常用指令及相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
vue如何實現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示
這篇文章主要介紹了vue如何實現(xiàn)多組關(guān)鍵詞對應(yīng)高亮顯示問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了vue編譯器util工具使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
在vue和element-ui的table中實現(xiàn)分頁復(fù)選功能
這篇文章主要介紹了在vue和element-ui的table中實現(xiàn)分頁復(fù)選功能，本文代碼結(jié)合圖文的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
vue3使用keep?alive實現(xiàn)前進更新后退銷毀
這篇文章主要為大家介紹了vue3中使用keep?alive實現(xiàn)前進更新后退銷毀示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
使用Vue CLI創(chuàng)建typescript項目的方法
這篇文章主要介紹了使用Vue CLI創(chuàng)建typescript項目的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08