1.新建两个component
1>Students.vue
<template>
<div>
<div>student:</div>
<input v-model="student"/>
<button @click="onAddStudent(student)">add</button>
<ul>
<li v-for="(student,index) in studentList" :key="index">{{student}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
student:"",
studentList:[]
}
},
methods:{
onAddStudent(student){
this.studentList.unshift(student);
}
}
}
</script>
2>Teachers.vue
<template>
<div>
<div>teacher:</div>
<input v-model="teacher" />
<button type="primary"
@click="onAddTeacher(teacher)"
style="height:20px">add</button>
<ul>
<li v-for="(teacher,index) in teacherList"
:key="index">
{{teacher}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
teacher: "",
teacherList: []
}
},
methods: {
onAddTeacher (teacher) {
this.teacherList.unshift(teacher);
}
}
}
</script>
2.App引入components
<template>
<div id="app">
<Teachers></Teachers>
<div>=======================================</div>
<Students></Students>
</div>
</template>
<script>
import Teachers from "./components/Teachers";
import Students from '@/components/Students';
export default {
name: 'App',
components: {
Teachers,
Students
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
3.main.js引入store
import Vue from 'vue'
import App from './App.vue'
import store from "./store"
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App),
}).$mount('#app')
4.store构建
新建index.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
actions:{
addTeacher(context,value){
context.commit("ADDTEACHER",value);
},
addStudent(context,value){
context.commit("ADDSTUDENT",value);
}
},
mutations:{
ADDTEACHER(state,value){
state.teacherList.unshift(value);
},
ADDSTUDENT(state,value){
state.studentList.unshift(value);
}
},
state:{
teacherList:[],
studentList:[]
}
})
5.修改component与store交互
1>Students.vue
<template>
<div>
<div>student:</div>
<input v-model="student"/>
<button @click="onAddStudent(student)">add</button>
<ul>
<li v-for="(student,index) in studentList" :key="index">{{student}}</li>
</ul>
<div>teachersNumber:{{teacherList.length}}</div>
</div>
</template>
<script>
export default {
data(){
return{
student:"",
}
},
computed:{
studentList(){
return this.$store.state.studentList;
},
teacherList(){
return this.$store.state.teacherList;
}
},
methods:{
onAddStudent(student){
this.$store.dispatch("addStudent",student);
}
}
}
</script>
2>Teacher.vue
<template>
<div>
<div>teacher:</div>
<input v-model="teacher" />
<button type="primary"
@click="onAddTeacher(teacher)"
style="height:20px">add</button>
<ul>
<li v-for="(teacherName,index) in teacherList"
:key="index">
{{teacherName}}
</li>
</ul>
<div>studentsNumber:{{studentList.length}}</div>
</div>
</template>
<script>
export default {
data () {
return {
teacher: "",
}
},
computed: {
teacherList () {
return this.$store.state.teacherList;
},
studentList(){
return this.$store.state.studentList;
}
},
methods: {
onAddTeacher (teacher) {
this.$store.dispatch("addTeacher", teacher);
}
}
}
</script>
6.mapState&mapActions版本
1>Students.vue
<template>
<div>
<div>student:</div>
<input v-model="student" />
<button @click="onAddStudent(student)">add</button>
<ul>
<li v-for="(student,index) in studentList"
:key="index">{{student}}</li>
</ul>
<div>teachersNumber:{{teacherList.length}}</div>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
data () {
return {
student: "",
}
},
computed: {
...mapState(['studentList', 'teacherList'])
},
methods: {
...mapActions({onAddStudent:'addStudent'})
}
}
</script>
2>Teachers.vue
<template>
<div>
<div>teacher:</div>
<input v-model="teacher" />
<button type="primary"
@click="onAddTeacher(teacher)"
style="height:20px">add</button>
<ul>
<li v-for="(teacherName,index) in teacherList"
:key="index">
{{teacherName}}
</li>
</ul>
<div>studentsNumber:{{studentList.length}}</div>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
data () {
return {
teacher: "",
}
},
computed: {
...mapState(["teacherList","studentList"])
},
methods: {
...mapActions({onAddTeacher:"addTeacher"})
}
}
</script>
7.模块化编码
1>修改store,增加TeacherCount.js
export default{
namespaced:true,
actions:{
addTeacher(context,value){
context.commit("ADDTEACHER",value);
}
},
mutations:{
ADDTEACHER(state,value){
state.teacherList.unshift(value);
}
},
state:{
teacherList:[]
}
}
2>修改store,增加StudentCount.js
export default{
namespaced:true,
actions:{
addStudent(context,value){
context.commit("ADDSTUDENT",value);
}
},
mutations:{
ADDSTUDENT(state,value){
state.studentList.unshift(value);
}
},
state:{
studentList:[]
}
}
3>修改store中index.js
import Vue from "vue";
import Vuex from "vuex";
import TeacherCount from '@/store/TeacherCount'
import StudentCount from '@/store/StudentCount'
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
TeacherCount,
StudentCount
}
})
4>修改Students.vue
主要在map前加上所属模块名
<template>
<div>
<div>student:</div>
<input v-model="student" />
<button @click="onAddStudent(student)">add</button>
<ul>
<li v-for="(student,index) in studentList"
:key="index">{{student}}</li>
</ul>
<div>teachersNumber:{{teacherList.length}}</div>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex'
export default {
data () {
return {
student: "",
}
},
computed: {
...mapState('StudentCount',['studentList']),
...mapState('TeacherCount',['teacherList'])
},
methods: {
...mapActions('StudentCount',{onAddStudent:'addStudent'})
}
}
</script>
5>修改Teacher.vue
<template>
<div>
<div>teacher:</div>
<input v-model="teacher" />
<button type="primary"
@click="onAddTeacher(teacher)"
style="height:20px">add</button>
<ul>
<li v-for="(teacherName,index) in teacherList"
:key="index">
{{teacherName}}
</li>
</ul>
<div>studentsNumber:{{studentList.length}}</div>
</div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
export default {
data () {
return {
teacher: "",
}
},
computed: {
...mapState('TeacherCount',["teacherList"]),
...mapState('StudentCount',["studentList"])
},
methods: {
...mapActions('TeacherCount',{onAddTeacher:"addTeacher"})
}
}
</script>