一 vuex知识点！！！

1.vuex是什么？

2.vuex 安装 

npm  install vuex --save

3.

 

4.目录

 

index.js ,

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'

Vue.use(Vuex)
const state = {
  bookInfo: [{
      id: 1,
      bookName: '女神的妖孽保镖',
      imgUrl: 'http://img60.ddimg.cn/digital/product/20/89/1960072089_ii_cover.jpg?version=2fe38ba8-04ac-4d27-9f35-e472bba7ddda',
      price: 22
    },
    {
      id: 2,
      bookName: '斗破苍穹',
      imgUrl: 'http://img62.ddimg.cn/digital/product/62/47/1960106247_ii_cover.jpg?version=ad9e940f-1f66-472c-94b3-c741a9873720',
      price: 33
    },
    {
      id: 3,
      bookName: '***',
      imgUrl: 'http://img61.ddimg.cn/digital/product/66/31/1960156631_ii_cover.jpg?version=6aa3f42f-db07-4693-9a84-c4b16289ab23',
      price: 45
    },
    {
      id: 4,
      bookName: '斗罗大陆II绝世唐门',
      imgUrl: 'http://img60.ddimg.cn/digital/product/47/41/1960104741_ii_cover.jpg?version=2de84bc6-242c-4499-ae23-e4be03f81a19',
      price: 20
    }, {
      id: 5,
      bookName: '不朽凡人',
      imgUrl: 'http://img60.ddimg.cn/digital/product/64/54/1960146454_ii_cover.jpg?version=2d761c9a-c975-4970-9477-07f2e9d8a343',
      price: 38
    }
  ],
  added:[]
}

//getters
const getters={
    books:state=>state.bookInfo,
    buyBooks:buyBooks=>state.added
}

//actions
//先执行actions ，然后执行mutations
const actions={
    addBook:({commit},book)=>commit('addBook',book),
    deleteBook:({commit},book)=>commit('deleteBook',book),
    updateBook:({commit},book)=>commit('updateBook',book),
    buyBook:({commit},book)=>commit('buyBook',book),
    cancelBook:({commit},book)=>commit('cancelBook',book)
}

export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

mutations.js

const mutations={
    addBook(state,book){

    },
    deleteBook(state,book){

    },
    updateBook(state,book){

    },
    buyBook(state,book){

    },
    cancelBook(state,book){

    }
}

export default mutations

6.总结：

state：是对象，存放数据

getter：用于获取state中的数据

actions：方法，异步，对应的是mutations的方法，先执行先执行actions ，然后执行mutations

mutations：action ，实际执行的方法，内容可能比较多，可以是单独的文件

PS：type.js 文件，相当于接口文件，如果方法比较多，从这个文件中就能知道项目有哪些操作

 

转载于:https://www.cnblogs.com/haigui-zx/p/7750113.html