【uni-app】Vuex介绍和使用

Posted 2023-03-21

参考技术A

无论你是使用 HX 还是使用 vue-cl i创建的uniapp项目,都已内置 Vuex ,无需再进行安装

uni-app也像小程序一样有 globalData ，这是一种简单的 全局变量 机制
globalData 是简单的全局变量，如果使用状态管理，请使用 vuex

项目文件结构

1.在 main.js 中导入store文件。

2.组装模块并导出 store

3.定义cart.js模块(这里以购物车为例)

4.定义根级别的getters

5.使用

查看下效果

点击添加按钮

uni-app使用vuex

        //1.根目录创建store文件->index.js
        import Vue from ‘vue’
        import Vuex from ‘vuex’

        Vue.use(Vuex)

        const store = new Vuex store ({
            state: {
                name: ‘’
            },
            getters: {
                
            },
            mutations: {
    
            },
            actions: {

            }
        })
        
        export default store

    //2.main.js下引入和挂载
        import store from ‘./store’
        Vue.prototype.$store = store
        const app = new Vue ({
            store
        })

       //3.页面引用
        <template>
            <div>
                {{name}}
            </div>
        </template>
        <scipt>
            import {mapState} from ‘vuex’
            export default {
                onLoad() {
                    console.log(this.$store)
                },
                computed: {
                    …mapState([‘name’])
                }
            }
        </script>