文章目录
1. 概述
1. 使用场景:多个组件之间的数据需要保持一致 - 即组件之间的沟通
2. 原理:有个仓库存储数据,所有组件共享该仓库存储的数据,一旦该仓库数据改变,所有跟该仓库数据绑定的的值都动态的进行改变,不用每次都发送$emit进行改父组件的值依次进行传递。
3. @:表示src目录下
2. 传统Vue组件传值
下列的场景不断的通过子组件发送$emit(“自定义事件”) 进行修改父亲的值 - 实在是太麻烦了
上图购物车场景的数据流通图
3. 使用Vuex
- 步骤1 - 安装vuex
npm install vuex --s
- 入口main.js添加下列代码
import Vuex from "vuex";
Vue.use(Vuex);
var store1 = new Vuex.Store({
state: {
//键值对 - 仓库存储的值
totalcount: 1,
cartsList: []
},
// 其实就是相当于state了,不够其又不是state。使用时像state里使用即可
// this.$store.getters.cartPriceSum
getters: {
// 默认参数为state
cartPriceSum( state ) {
var sum = 0;
state.cartsList.forEach((item,index) => {
if(item.isClick == true) {
sum = sum + item.num * item.product.current_price
}
})
return sum;
}
},
// 修改state数据 -- this.$store.commit("方法名", 方法调用传的参数)
mutations: {
//第一个默认参数为state,第二个参数payload为调用者传的实参
updatecount(state, payload) {
state.totalcount = payload
}
},
//处理ajax请求 调用 this.$store.dispatch("方法")
actions: {
//根据自己的需求写默认参数
//默认参数context:{ state,rootState,commit,dispatch, getters }
method1( {
state,rootState,commit,dispatch, getters} ){
发送ajax请求
}
// payload - 方法调用者传过来的实参
method2( {
state, commit }, payload ) {
发送ajax请求
}
}
})
//在Vue实例中进行挂载这个数据共享仓库
new Vue({
store: store1;
})
- 使用
//各组件获取仓库的值:
{
{
this.$store.state.属性 }}
//修改仓库的值,则必须使用仓库的mutations内的方法进行修改
this.$store.commit("方法名", payload对象);
this.$store.commit({
type:"方法名", 传的参数变量: 参数值 } ]
// 调用actions方法
this.$store.dispatch("方法名", payload对象)