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的组件)使用
- import { mapActions } from “vuex”
- 在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方法名’,值)