import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const actions = {
saveUser(context,value){
context.commit("SAVE_USERS",value);
},
saveVip(context,value){
context.commit("SAVE_VIP",value);
},
reverseName(context,value){
value = value.split('').reverse().join('');
context.commit("REVERSE_NAME",value)
}
};
const mutations = {
SAVE_USERS(state,value){
// unshift往第一个位置加东西,push往最后加东西
state.users.push(value);
},
SAVE_VIP(state,value){
// unshift往第一个位置加东西,push往最后加东西
state.vips.push(value);
},
REVERSE_NAME(state,value){
state.Name = value;
}
};
const state = {
users : [
{id : "001",name : "Jack"},
{id : "002",name : "Rose"},
{id : "003",name : "Tom"},
{id : "004",name : "Jerry"}
],
vips : [
{id : "001",name : "Jack"},
{id : "002",name : "Rose"},
{id : "003",name : "Tom"},
{id : "004",name : "Jerry"}
],
Name : ""
};
// 全新的配置项getters
const getters = {
// 每一个getter就是一个计算属性
// 每一个getter都会接收一个state对象
reversedName(state){
// 可以视为VUE中的计算属性computed
return state.Name.split('').reverse().join('');
}
};
export default new Vuex.Store({actions,mutations,state,getters});
<template>
<div>
<User></User>
<hr>
<Vip></Vip>
<hr>
<Name></Name>
</div>
</template>
<script>
import Vip from "./components/Vip.vue"
import User from "./components/User.vue"
import Name from "./components/Name.vue"
export default {
name : "App",
components : {Vip,User,Name}
}
</script>
<style>
</style>
<template>
<div>
<input type="text" v-model="$store.state.Name" @keydown.13="submit()"/>
<button @click="submit">按一下</button>
<h3>{{ reverseName }}</h3>
</div>
</template>
<script>
export default {
name : "Name",
data(){
return {
name : ""
}
},
methods : {
submit(){
this.$store.dispatch("reverseName",this.name);
}
},
computed : {
reverseName(){
return this.name.split('').reverse().join('');
}
}
}
</script>
<style>
</style>
<template>
<div>
<h1>用户列表</h1>
<input type="text" v-model="username"/>
<button @click="saveUser()">保存用户</button>
<ul>
<li v-for="user in $store.state.users" :key="user.id">
用户名:{{ user.name }}
</li>
</ul>
<h3>当前用户数量{{ $store.state.users.length }}</h3>
<h3>当前会员数量{{ $store.state.vips.length }}</h3>
<h3>{{ $store.getters.reversedName }}</h3>
</div>
</template>
<script>
export default {
name : "User",
data(){
return {
username : ""
}
},
methods : {
saveUser(){
const id = this.$store.state.users.length + 1;
const user = {"id" : id,"name" : this.username};
// 如果action中的逻辑非常简单,可以直接commit
// this.$store.dispatch("saveUser",user);
this.$store.commit("SAVE_USERS",user);
this.username = "";
}
}
}
</script>
<style>
</style>
<template>
<div>
<h1>会员列表</h1>
<input type="text" v-model="username"/>
<button @click="saveVip()">保存用户</button>
<ul>
<li v-for="vip in $store.state.vips" :key="vip.id">
用户名:{{ vip.name }}
</li>
</ul>
<h3>当前用户数量{{ $store.state.users.length }}</h3>
<h3>当前会员数量{{ $store.state.vips.length }}</h3>
<h3>{{ $store.getters.reversedName }}</h3>
</div>
</template>
<script>
export default {
name : "Vip",
data(){
return {
username : ""
}
},
methods : {
saveVip(){
const id = this.$store.state.vips.length + 1;
const vip = {"id" : id,"name" : this.username};
// 如果action中的逻辑非常简单,可以直接commit
// this.$store.dispatch("saveVip",vip);
this.$store.commit("SAVE_VIP",vip);
this.username = "";
}
}
}
</script>
<style>
</style>
