vuex

                             vuex的作用
复制代码

                      通过发送ajax请求,获取书籍信息渲染到页面并算出总价
                          store/index.js
复制代码

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {

  },
  mutations: {

  },
  getters: {

  },
  actions: {

  },
  modules: {
    books: {
      namespaced: true,
      state: { pir: [] },
      getters: {
        totalPrice: function (state) {
          let sum = 0
          state.pir.forEach(item => {
            sum += item.price
          })
          return sum
        }
      },
      mutations: {
        setBooks (state, newBooks) {
          state.pir = newBooks
        }
      },
      actions: {
        add: function (context) {
          axios({
            url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books'
          }).then(res => {
            context.commit("setBooks", res.data.data)
          })
        }
      },
    }
  }
})
export default store
复制代码

                                main.js
复制代码

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')
复制代码

                               APP.vue
复制代码

<template>
  <div id="app">
    <p v-for="(item, index) in $store.state.books.pir" :key="index">
      {{ item.name }}:{{ item.price }}
    </p>
    合计:{{ $store.getters["books/totalPrice"] }}
  </div>
</template>

<script>
export default {
  created () {
    this.$store.dispatch('books/add')
  }
}
</script>

<style>
</style>
复制代码