VueX使用

VueX五个核心概念：

state, getters, mutations, actions, modules。

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

Vuex的用法：

1. 新建vue项目supermall

2. 在supermall中建store文件夹

3. store文件夹下以下文件：

index.js、getter.js 、 actions.js 、mutations.js、mutations-types.js

store文夹下的index.js

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

// 1.安装插件
Vue.use(Vuex)

// 2.创建store对象
const state = {
  cartList: []
}

const store  = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
})

// 3.挂载vue实例上
export default store

store文夹下的getters文件

export default {
  cartLength(state) {
    return state.cartList.length
  },
  cartList(state) {
    return state.cartList
  }
}

store文夹下的*mutations.js

import {
  ADD_COUNTER,
  ADD_TO_CART
} from './mutation-types'

export default {
  // mutations唯一的目的就是修改state中状态
  // mutations中的每一个方法尽可能完成的事件比较单一一点
  [ADD_COUNTER](state,payload) {
    payload.count++
  },
  [ADD_TO_CART](state,payload) {
    payload.checked = true
    state.cartList.push(payload)
  }
}

store文夹下的mutations-types.js

export const ADD_COUNTER = 'add_counter'
export const ADD_TO_CART = 'add_to_cart'

store文夹下的actions.js

import {
  ADD_COUNTER,
  ADD_TO_CART
} from './mutation-types'

export default {
  addCart(context, payload) {
    return new Promise((resolve, reject) => {
      // 1.查找之前数组中是否有该商品
      let oldProduct = context.state.cartList.find(item => item.iid === payload.iid)

      // 2.判断oldproduct
      if (oldProduct) {
        // oldProduct.count += 1
        context.commit(ADD_COUNTER, oldProduct)
        resolve('当前商品数量+1')
      } else {
        payload.count = 1
        // context.state.cartList.push(payload)
        context.commit(ADD_TO_CART, payload)
        resolve('添加了新的商品')
      }
    })
  }
}

5. 在项目的main.js中引入 import store from ‘./store’

// import { createApp } from 'vue'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import FastClick from "fastclick"

import toast from 'components/common/toast'

// 安装toast插件
Vue.use(toast);

// 解决移动端300ms延迟问题
FastClick.attach(document.body);

Vue.prototype.$bus = new Vue()
// app.mount('#app')
new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

6. 在详情页（要使用store的组件）使用

1. import { mapActions } from “vuex”
2. 在methods中使用mapActions

...mapActions(['addCart']),
addToCart() {
      // 1.获取购物车需要展示的信息
      const product = {}
      product.image = this.topImages[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.realPrive;
      product.iid = this.iid;

      // 2.将商品添加至购物车
      // this.$store.cartList.push(product)
      // this.$store.commit('addCart',product)
      this.addCart(product).then(res => {
        // console.log(res);
        this.$toast.show(res,2000);
      })

      // this.$store.dispatch('addCart',product).then(res => {
      //   console.log(res);
      // })
    }

也可以使用下面这两种方法存储数据：

dispatch：异步操作，写法： this.$store.dispatch(‘mutations方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)