vue數據管理vuex小demo練習

接着前面的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
};