接着前面的demo继续练习,前面的练习地址
主要练习数据管理Vuex,解决数据共享问题.主要涉及的知识点地址
效果:
项目文件目录:
在昨天的基础上增加了数据管理仓库文件夹其中包含
index.js 数据仓库文件
movie.js 电影数据模块
online.js 在线人数模块
index.js
import movies from "./movies.js"
import online from './online.js'
export default new Vuex.Store({
modules:{
movies,
online,
}
})
movie.js
import movieService from "../service/movieService.js"
export default{
namespaced:true,
state:{
data: [],
total: 0,
page: 1,
limit: 3,
isLoading: false
},
mutations:{
/**
* @param{mutations的名称} setPage
* @param {原来的状态} oldState
* @param {载荷,为了变化新状态,需要的额外的信息} payload
*/
setPage(oldState,payload){
oldState.page = payload.page;
},
setResp(oldState,payload){
oldState.data = payload.data;
oldState.total = payload.total;
},
setIsLoading(oldState,payload){
oldState.isLoading = payload.isLoading;
}
},
//异步处理
actions:{
async fetchMovies(context){ //可以将context当做store对象
context.commit("setIsLoading",{isLoading:true});
var resp = await movieService.getMovies(context.state.page,context.state.limit);
context.commit("setResp",{data:resp.data,total:resp.count});
context.commit("setIsLoading",{isLoading:false});
}
}
}
online.js
export default {
namespaced: true,
state:{
number:0
},
mutations:{
//state表示之前的状态
//mutations名称为increase
increase(state){
state.number++;
},
decrease(state){
if(state.number === 0){
return;
}
state.number --;
}
},
actions:{
asyncIncrease(context){
setTimeout(() => {
context.commit("increase")
}, 1000);
},
asyncDecrease(context){
setTimeout(() => {
context.commit("decrease")
}, 1000);
}
}
}
Home.js
export default {
template:`
<div style="padding:100px">
<h1>{{ number }}</h1>
<button @click = "reduce">减少</button>
<button @click = "add">增加</button>
<button @click = "asyncReduce">异步减少</button>
<button @click = "asyncAdd">异步增加</button>
<div>
<h1>电影的页码:{{page}}</h1>
<button @click = "addPage">增加页码</button>
</div>
</div>
`,
computed:{
number(){
return this.$store.state.online.number;
},
page(){
return this.$store.state.movies.page;
}
},
created() {
console.log(this.$store);
},
//开启命名空间可以防止命名冲突
methods: {
add(){
this.$store.commit("online/increase")
},
reduce(){
this.$store.commit("online/decrease")
},
asyncAdd(){
this.$store.dispatch("online/asyncIncrease")
},
asyncReduce(){
this.$store.dispatch("online/asyncDecrease")
},
addPage(){
// this.$store.commit("movies/setPage",{
// page:this.page +1
// })
this.$store.commit({
type:"movies/setPage",
page:this.page + 1
});
},
}
}
MovieContainer.js
//该组件仅用于获取电影数据
import MovieList from "./MovieList.js";
import Pager from "./Pager.js";
import Loading from "./Loading.js"
var template = `
<div>
<MovieList :movies="data"/>
<Pager @page-change="handlePageChange" :total="total" :limit="limit" :current="page"/>
<Loading :isShow="isLoading"/>
</div>
`;
export default {
components: {
MovieList,
Pager,
Loading
},
computed: Vuex.mapState("movies",["page","limit","total","data","isLoading"]),
async created() {
//获取电影数据
this.getMovies();
},
methods: {
handlePageChange(newPage) {
this.$store.commit("movies/setPage",{page: newPage});
this.getMovies();
},
getMovies(){
this.$store.dispatch("movies/fetchMovies")
}
},
template
};