如何在uni-app使用vuex如何将vuex模块化！

一、使用vuex
由于uni-app已经内置了vuex，所以只要正确引入就好了。

1、在项目的根目录下，创建一个名为store的文件夹然后在该文件夹下创建一个index.js的js文件
2、在该js文件下定义公共的数据以及方法函数，并且把它导出

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {},
    mutations: {},
    actions: {}
})
export default store

3、在入口文件即：main.js挂载vuex

import Vue from 'vue'
import App from './App'
//引入vuex
import store from './store'
//把vuex定义成全局组件
Vue.prototype.$store = store
Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App,
//挂载
    store
})
app.$mount()

4、在单页面里使用vuex

<script>
    export default {
        created () {
            console.log(this.$store)
        }
    }
</script>

二、如何将vuex模块化

目录结构为
|—demo1.js
|—demo2.js
index.js

index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const context = require.context('./modules', false, /\.js$/);
const moduleStores = {};

context.keys().forEach(key => {
    // 获取读取到的文件名字并且截取
    const fileName = key.slice(2, -3);
    //通过 context(key)导出文件内容
    const fileModule = context(key).default;
    moduleStores[fileName] = {
        ...fileModule,
    };
});
export default new Vuex.Store({
    modules: {
        ...moduleStores,
    },
});

demo1.js

const demoname = {
    fn: 'fn',
}
const store = {
    state: {
        demo: '名字'
    },
    getters: {
        getLocale: state => {
            return state.demo + 321
        }
    },
    mutations: {
        [demoname.fn]: (state, localeVal) => {
            console.log('被执行了', localeVal)
        }
    },
    actions: {
        demoactions: ({ commit }, localeVal) => {
            commit(demoname.fn, localeVal)
        }
    }
}
export default store

demo2.js同上

页面使用

<template>
    <view class="content">
        <view class="text-area">
            <view class="title">{{demo1.demo}}</view>
            <view class="title">{{getLocale}}</view>
        </view>
    </view>
</template>

<script>
    import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        computed: {
            ...mapGetters(['getLocale']),
            ...mapState([
                'demo1'
            ])
        },
        onLoad() {
            this.fn('传递的内容')
            this.demoactions('这是一个异步')
        },
        methods: {
            ...mapMutations([
                'fn'
            ]),
            ...mapActions([
                'demoactions'
            ])
        }
    }
</script>

<style>
</style>