项目中使用vuex的基本步骤及注意事项（已经在用vuex的前提下）

项目中使用vuex的基本步骤及注意事项（已经在用vuex的前提下，modules模式下使用mapState）

结构

data.js 是本次我们新添加的自己使用的。

  src
    ├-- store 
    	 ├--- modules
    	 |        ├--- app.js
    	 |        ├--- user.js
    	 |        ├--- data.js
    	 |        └--- dict.js
    	 └--- index.js

定义

index.js

import Vue from 'vue';
import Vuex from 'vuex';

import app from './modules/app';
import user from './modules/user';
import dict from './modules/dict';
import data from './modules/data';

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        // 状态
    },
    mutations: {
        // 改变方法
    },
    actions: {

    },
    modules: {
        app,
        user,
        dict,
        data,
    }
});

export default store;

data.js

const data = {
    state: {
        // 经常需要读取的数据字典
       totalCase:0,
    },
    mutations: {
       submitCase(state,n){
        state.totalCase=n
       },
    }
};
export default data;

提交数据

// 在某个方法中，进行数据提交
this.$store.commit('submitCase', 20)

使用数据（取用数据）

<template>
<div class="searchPage">
    {{totalCase}}
</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data() {
        return {}
    },
    computed: {
        ...mapState({
            totalCase: state => state.data.totalCase,// 这里的data是上面data.js文件里面定义的data
        })
    },
    /* 或者
    computed:{
        totalCase() {
            return this.$store.state.data.totalCase
		},
    }, */
}
</script>