vuex简单使用

1、创建src/store/index.js----仓库所在地----暴露store

2、main.js入口文件处引入store，挂载到Vue根实例中

3、创建store/movie.js-----电影页面对应的状态管理模块

export default {

  state: {

   

  },

  getters: {

    

  },

  actions: {

 

  },

  mutations: {

 

  }

}

4、定义电影页面关联的初始状态

export default {

  state: {

       movielist: []

  },

  getters: {

    

  },

  actions: {

 

  },

  mutations: {

 

  }

}

5、定义异步操作action和改变状态mutation

export default {

  state: {

    movielist: []

  },

  getters: {

    

  },

  actions: {

    getMovielist ({commit}) {

   

    }

  },

  mutations: {

    changeMovielist (state, data) {

      state.movielist = data

    }

  }

}

6、实现异步操作中的数据请求-----src/api/movie.js

import axios from 'axios'

 

export default {

  getMovielist (cb) {

    axios.get('http://localhost:3000/api/movies')

          // .then(({data}) => {cb(data)})

          .then((res) => {cb(res.data)})

          .catch((err) => {console.log(err)})

  }

}

7、实现store/movie.js中的action的后续操作-----提交mutation改变数据源

import movieapi from '@/api/movie.js'

export default {

  state: {

    movielist: []

  },

  getters: {

    

  },

  actions: {

   // getMovielist ({commit}) {

   //   movieapi.getMovielist((data) => {commit('changeMovielist', data)})

  //  }，

 getMovielist (context) {

      movieapi.getMovielist((data) => {context.commit('changeMovielist', data)})

    }

  },

  mutations: {

    changeMovielist (state, data) {

      state.movielist = data

    }

  }

}

 

8、组件movie组件的js中，添加一个选项computed，用来接收store中的数据----使用mapState辅助函数

import {mapState} from 'vuex'

export default {

  computed: { //你store/movie中定义的初始状态是什么，key值就是什么，中间{}中的store/index.js中的modules中的key值

    ...mapState({

      movielist: ({movie}) => movie.movielist

    })

  }

}

 

9、提交action---组件mounted函数中

import {mapState} from 'vuex'

export default {

  computed: { //你store/movie中定义的初始状态是什么，key值就是什么，中间{}中的store/index.js中的modules中的key值

    ...mapState({

      movielist: ({movie}) => movie.movielist

    })

  },

  mounted () {

    this.$store.dispatch('getMovielist')

  }

}

10、组件的模板中可以直接使用movielist渲染数据

<ul>

      <li v-for='item in movielist' :key='item.id'>

        {{item.title}}

      </li>

    </ul>

11、分页功能

casts组件中添加了一个按钮，模拟下一页

<button @click="getData()">下一页</button>

在其js中添加

methods: {

    getData () { //下一页

      this.$store.dispatch('getCastsPagingList',{skipNum:2,limitNum:5})

    }

  },

store/casts.js

actions: {

    getCastsList (context) {

      castsapi.getCastsList((data) => {context.commit('changeCastslist', data)})

    },

    getCastsPagingList (context, option){

      castsapi.getCastsPagingList(option, (data) => {context.commit('changeCastsPagingList', data)})

    }

  },

  mutations: {

    changeCastslist (state, data) {

      state.castslist = data

    },

    changeCastsPagingList (state, data) {

      state.castslist = [...state.castslist, ...data]

    }

  }

}

api/casts.js

import axios from 'axios'

 

export default {

  getCastsList (cb) {

    axios.get('http://localhost:3000/api/castspaging?limitNum=5&skipNum=0')

          .then(({data}) => {cb(data)})

          .catch((err) => {console.log(err)})

  },

  getCastsPagingList ({limitNum, skipNum}, cb) {

    console.log(limitNum)

    console.log(skipNum)

      axios.get('http://localhost:3000/api/castspaging?limitNum='+ limitNum+'&skipNum='+skipNum)

                  .then(({data}) => {cb(data)})

                  .catch((err) => {console.log(err)})

  }

}