练习vue-x的小demo

小demo----vuex的练习

先来看效果

目标 通过vuex发送请求  渲染页面  代码：

  store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    bookList: []
  },
  mutations: {
    // 获取图书列表
    getBooks (state, newList) {
      state.bookList = newList
    },
    delBook (state, index) {
      state.bookList.splice(index, 1)
    }
  },
  actions: {
    async ajax (state) {
      try {
        const { data } = await axios({
          url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books'
        })
        this.commit('getBooks', data.data)
      } catch (err) {
        console.log(err)
      }
    }
  },
  modules: {
  }
})

async 代表一个异步操作  await用来接受axios发送请求的成功的结果

try  catch用来捕获发起请求中的错误

 shopCar 组件

1. 组件初始化钩子函数调用vuex中的action发起ajax请求  拿到数组 循环渲染

2.删除：点击传入索引  调用this.$store.commit('') 调用vuex中的mutation中的方法来对vuex中的state的数据进行修改

app.vue

 注册组件 显示页面

效果如下