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
