dhcmrlchtdj/app.html

## app.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    </head>
    <body>
        <div id="app">
            <v-app></v-app>
        </div>
        <script defer src="./app.js"></script>
    </body>
</html>

## app.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import vApp from './app.vue';
import { store } from './vuex.js';

new Vue({ // eslint-disable-line no-new
    el: '#app',
    components: {
        'v-app': vApp,
    },
    store: store,
});

## app.vue
<style>
    p {
        color: red;
    }
</style>

<template>
    <p>hello world</p>
</template>

<script>
    import { getters, actions } from './vuex.js';

    export default {
        components: {
        },

        vuex: {
            getters,
            actions,
        },

        ready: function() {
            this.initData({});
        },
    };
</script>

## vuex.data.js
export var state = {
    data: null,
};


export var getters = {
    data: function(state) {
        return state.data;
    },
};


export var mutations = {
    'INIT_DATA': function(state, data) {
        state.data = data;
    },

    'UPDATE_DATA': function(state, key, val) {
        state.data[key] = val;
    },
};


export var actions = {
    initData: function(store, data) {
        store.dispatch('INIT_DATA', data);
    },

    updateData: function(store, key, val) {
        store.dispatch('UPDATE_DATA', key, val);
    },
};


export var watch = function(store, acts) {
    store.watch('other.props', function(val) {
        actions.updateData(store, 'props', val);
    });
};

## vuex.js
import Vuex from 'vuex';

import * as data from './vuex.data.js';

var arr = [
    data,
];

var assignProperty = function(prop) {
    var args = [{}];
    arr.forEach(function(item) {
        args.push(item[prop]);
    });
    return Object.assign.apply(null, args);
};

export var store = new Vuex.Store({
    strict: process.env.NODE_ENV !== 'production',
    state: assignProperty('state'),
    mutations: assignProperty('mutations')
});

export var getters = assignProperty('getters');
export var actions = assignProperty('actions');


arr.forEach(function(item) {
    if (typeof item.watch === 'function') {
        item.watch(store, actions);
    }
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
	</head>
	<body>
	<div id="app">
	<v-app></v-app>
	</div>
	<script defer src="./app.js"></script>
	</body>
	</html>
	import Vue from 'vue';
	import Vuex from 'vuex';

	Vue.use(Vuex);

	import vApp from './app.vue';
	import { store } from './vuex.js';

	new Vue({ // eslint-disable-line no-new
	el: '#app',
	components: {
	'v-app': vApp,
	},
	store: store,
	});
	<style>
	p {
	color: red;
	}
	</style>

	<template>
	<p>hello world</p>
	</template>

	<script>
	import { getters, actions } from './vuex.js';

	export default {
	components: {
	},

	vuex: {
	getters,
	actions,
	},

	ready: function() {
	this.initData({});
	},
	};
	</script>
	export var state = {
	data: null,
	};


	export var getters = {
	data: function(state) {
	return state.data;
	},
	};


	export var mutations = {
	'INIT_DATA': function(state, data) {
	state.data = data;
	},

	'UPDATE_DATA': function(state, key, val) {
	state.data[key] = val;
	},
	};


	export var actions = {
	initData: function(store, data) {
	store.dispatch('INIT_DATA', data);
	},

	updateData: function(store, key, val) {
	store.dispatch('UPDATE_DATA', key, val);
	},
	};


	export var watch = function(store, acts) {
	store.watch('other.props', function(val) {
	actions.updateData(store, 'props', val);
	});
	};
	import Vuex from 'vuex';

	import * as data from './vuex.data.js';

	var arr = [
	data,
	];

	var assignProperty = function(prop) {
	var args = [{}];
	arr.forEach(function(item) {
	args.push(item[prop]);
	});
	return Object.assign.apply(null, args);
	};

	export var store = new Vuex.Store({
	strict: process.env.NODE_ENV !== 'production',
	state: assignProperty('state'),
	mutations: assignProperty('mutations')
	});

	export var getters = assignProperty('getters');
	export var actions = assignProperty('actions');


	arr.forEach(function(item) {
	if (typeof item.watch === 'function') {
	item.watch(store, actions);
	}
	});