【uni-app】Vuex介绍和使用

介绍

无论你是使用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