介紹
無論你是使用HX還是使用vue-cli創建的uniapp項目,都已內置Vuex,無需再進行安裝
uni-app也像小程序一樣有globalData，這是一種簡單的全局變量機制
globalData是簡單的全局變量，如果使用狀態管理，請使用vuex
一些簡單的常量(變量)建議使用
globalData
涉及到響應式的數據和跨組件共享數據、跨頁面共享數據,建議使用vuex
-
vuex與全局變量globalData的區別
image.png
使用
項目文件結構
├── pages
├── static
└── store
├── index.js # 我們組裝模塊并導出 store 的地方
├── getters.js # 根級別的 getters
└── modules # 模塊文件夾,根據模塊命名
├── cart.js # 購物車模塊
└── products.js # 產品模塊
├── App.vue
├── main.js
├── manifest.json
├── pages.json
└── uni.scss
1.在 main.js 中導入store文件。
<!-- main.js -->
import Vue from 'vue'
import App from './App'
import store from './store'
// 把 store 對象提供給 “store” 選項，這可以把 store 的實例注入所有的子組件
const app = new Vue({
store,
...App
})
app.$mount()
2.組裝模塊并導出 store
//store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'；//引入根級別getters
Vue.use(Vuex)
// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import cart from './modules/cart'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
- 如果我們要單項引入
modules需要import cart from './modules/cart
但一般我們在開發中,所定義的modules基本上都是要引入的
所以如下示例,批量引入了modules ( cart.js/products.js ) - 單項引入了根級別的getters
這里省略了根級別的 mutation和根級別的 action引入
因為一般提交mutation和分發action都是需要操作modules里數據,所以mutation和action就和modules放一起了,當然如果你想也可以和getters一樣單獨拎出來
3.定義cart.js模塊(這里以購物車為例)
//cart.js
const state = {
totalPrice: 9999,//總價
goodsCount: 9,//數量
}
const mutations = {
//添加商品
TOGGLE_ADD(state, data) {
state.goodsCount += data.count;
state.totalPrice += data.price;
}
}
const actions = {
//添加商品
toogle_add({commit},data){
commit('TOGGLE_ADD',data)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
4.定義根級別的getters
//getters.js
const getters = {
averagePrice: state => state.cart.totalPrice/state.cart.goodsCount,
}
export default getters
5.使用
<template>
<view class="container">
<view>商品總價 (元) : {{totalPrice}}</view>
<view>商品數量 (個) : {{goodsCount}}</view>
<view>商品均價 (元) : {{averagePrice}}</view>
<button @click="addGoods">添加一個 100元/個 的商品</button>
</view>
</template>
<script>
import {
mapState,
mapGetters
} from 'vuex' //引入mapState
export default {
data() {
return {}
},
methods: {
addGoods() {
this.$store.dispatch('cart/toogle_add', {
price: 100,
count: 1
})
},
},
computed: {
...mapState({
totalPrice: state => state.cart.totalPrice,
goodsCount: state => state.cart.goodsCount,
}),
...mapGetters({
averagePrice: 'averagePrice'
})
}
}
</script>
查看下效果
image.png
點擊添加按鈕
image.png
