23. vuex中模块化管理

https://vuex.vuejs.org/zh/guide/modules.html

示例一： 初识

子模块 store/user.js

const user = {
    state: () => ({ 
        username:"老陈",
        age:30
     }),
    mutations: { 
        setUsername:function(state){
            this.state.username = "小陈"
        },
        setAge:function(state){
            this.state.age=40
        }
     },
    actions: { 
        asyncSetAge:function(context){
            console.log(context)
            setTimeout(()=>{
                context.commit('setAge')
            },3000);
        }
     },
    getters: { 
        description:function(state,getters,rootStage){
            return state.username + "的年龄是" +state.age
        }
     }
  }
export  default user

store/index.js

import { createStore } from 'vuex'
import user from './user'
export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user
  }
})

视图层 UserView.vue

<template>
    <div>
        <h1>用户名：{{$store.state.user.username}}</h1>
        <h1>年龄：{{$store.state.user.age}}</h1>
        <h1>描述：{{$store.getters.description}}</h1>
    </div>
</template>

路由

import UserView from '../views/UserView.vue'

  {
    path: '/user',
    name: 'user',
    component: UserView
  },

示例二 console.log(this.$store) 查看

UserView.vue

<template>
    <div>
        <h1>用户名：{{$store.state.user.username}}</h1>
        <h1>年龄：{{$store.state.user.age}}</h1>
        // 例如不知道描述信息怎么得到，可以通过打印日志，如图
        <h1>描述：{{$store.getters.description}}</h1>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log(this.$store)
    },
}

示例三： 子模块添加事件和方法,及带参函数

UserView.vue

<template>
    <div>
        <h1>用户名：{{$store.state.user.username}}</h1>
        <h1>年龄：{{$store.state.user.age}}</h1>
        <h1>描述：{{$store.getters.description}}</h1>
        <button @click="changeAge">异步修改数据</button>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log(this.$store)
    },

    methods: {
        changeAge:function(){
            this.$store.dispatch('asyncSetAge')
        }
    },
}
</script>

store/user.js

const user = {
    state: () => ({ 
        username:"老陈",
        age:30
     }),
    mutations: { 
        setUsername:function(state){
            state.username = "小陈"
        },
        setAge1:function(state){
            state.age=40
        },
        // 创建带参
        setAge:function(state,value){
            state.age=value
        }        
     },
    actions: { 
        asyncSetAge:function(context){
            console.log(context)
            setTimeout(()=>{
            	//context.commit('setAge')
            	// 调用带参函数
                context.commit('setAge',40)
            },3000);
        }
     },
    getters: { 
        description:function(state,getters,rootStage){
            return state.username + "的年龄是" +state.age
        }
     }
  }
export  default user