<!DOCTYPE html>
<html lang='en'>
<head>
? ? <meta charset='UTF-8'>
? ? <meta name='viewport' content='width=device-width, initial-scale=1.0'>
? ? <meta http-equiv='X-UA-Compatible' content='ie=edge'>
? ? <title>Doc</title>
</head>
<body>
? ? <button id='user1'>獲取users這個(gè)模塊里面的state</button>
? ? <button id='chat1'>獲取chats這個(gè)模塊里面的state</button>
? ? <button id='user2'>修改users這個(gè)模塊里面的state的id</button>
? ? <button id='chat2'>異步修改chats這個(gè)模塊里面state的from</button>
? ? <button id='user3'>獲取users這個(gè)模塊里面的getters里面getId</button>
</body>
</html>
<script src='https://cn.vuejs.org/js/vue.js'></script>
<script src="https://unpkg.com/vuex"></script>
<script>
? ? Vue.use(Vuex);
? ? var store=new Vuex.Store({
? ? ? ? modules:{
? ? ? ? ? ? users:{
? ? ? ? ? ? ? ? namespaced:true,
? ? ? ? ? ? ? ? state:{
? ? ? ? ? ? ? ? ? ? id:233
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? mutations:{
? ? ? ? ? ? ? ? ? ? changeId(state,payload){
? ? ? ? ? ? ? ? ? ? ? ? state.id=payload.id;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? getters:{
? ? ? ? ? ? ? ? ? ? getId(){
? ? ? ? ? ? ? ? ? ? ? ? return 10;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? chats:{
? ? ? ? ? ? ? ? namespaced:true,
? ? ? ? ? ? ? ? state:{
? ? ? ? ? ? ? ? ? ? from:123,
? ? ? ? ? ? ? ? ? ? to:456
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? mutations:{
? ? ? ? ? ? ? ? ? ? changeFrom(state,payload){
? ? ? ? ? ? ? ? ? ? ? ? state.from=payload.from
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? actions:{
? ? ? ? ? ? ? ? ? ? asyncChangeFrom(store,payload){
? ? ? ? ? ? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? store.commit('changeFrom',{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? from:789
? ? ? ? ? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? ? ? ? ? },3000)
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? })
? ? user1,onclick=function(){
? ? ? ? console.log(store.state.users.id);
? ? }
? ? chat1.onclick=function(){
? ? ? ? console.log(store.state.chats.to);
? ? }
? ? user2.onclick=function(){
? ? ? ? store.commit({
? ? ? ? ? ? type:'users/changeId',
? ? ? ? ? ? id:999999
? ? ? ? })
? ? }
? ? chat2.onclick=function(){
? ? ? ? store.dispatch({
? ? ? ? ? ? type:'chats/asyncChangeFrom'
? ? ? ? })
? ? }
? ? user3.onclick=function(){
? ? ? ? console.log(store.getters['users/getId']);
? ? }
</script>
