vuex使用例子

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>