版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83683968
官网：Vuex
Vuex 是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到 Vuex 中，而不必通过父子组件之间传值了，如果组件之间的数据不需要，这些不需要共享的私有数据，没有必要放到 Vuex 中
注意：
- 只有共享的数据，才有权利放到 Vuex 中；
- 组件内部私有的数据，只要放到组件的 data 中即可；
- props 、 data 和 vuex 的区别：props 是父组件向子组件传值；data 是组件内部私有数据；vuex 相当于一个全局的共享数据存储区域，就是一个公共数据仓库
操作案例：
- 安装：
cnpm i vuex -s
操作：
main.js
// 入口文件
import Vue from 'vue';
// 配置 vuex 的步骤
// 2. 导入包
import Vuex from 'vuex';
// 3. 注册 vuex 到 vue 中
Vue.use(Vuex);
// 4. new Vue.Store() 实例，得到一个数据仓储对象
let store = new Vuex.Store({
state: {
// 大家可以把 state 想象成组件中的 data ，专门用来存储数据的
// 如果在组件中，想要访问 store 中的数据，只能通过
// this.$store.state.*** 来访问
count: 0
},
mutations: {
// 注意：如果要操作 store 中的 state 值，只能通过调用 mutation
// 提供的方法，才能操作对应的数据，不推荐直接操作 state 中的数据，
// 因为万一导致了数据的紊乱，不能快速定位到错误的原因，因为每个组
// 件都可能有操作数据的方法；
increment(state) {
state.count++;
},
// 注意：如果组件想要调用 mutations 中的方法，
// 只能使用 this.$store.commit('方法名')
subtract(state, obj) {
// 注意：mutations 的函数参数列表中，最多支持两个参数，其中，
// 参数1：是 state 状态；参数2：通过 commit 提交过来的参数：
// 提交过来参数若是多个，可以以数组对象的形式
state.count -= (obj.c + obj.d);
}
},
getters: {
// 注意：这里的 getters ，只负责对外提供数据，不负责
// 修改数据，如果想要修改 state 中的数据，请去找 mutations
optCount: function (state) {
return '当前最新的 count 值是：' + state.count;
}
// getters 中的方法，和组件中的过滤器比较类似，因为过滤器和
// getters 都没有修改原数据，都是把原数据做了一层包装，提供给了调用者；
// 其次，getters 也和 computed 比较像，只要 state 中的数据发生了变化，
// 如果 getters 正好也引用了这个数据，那么就会立即触发 getters 的重新求值；
}
});
import App from './App.vue';
const vm = new Vue({
el: '#app',
render: c => c(App),
// 5. 将 vuex 创建的 store 挂载到 VM 实例上，只要挂在到了 VM 上
// 任何组件都能使用 store 来存储数据
store
});
两个组件：
amount.vue
<template>
<div>
<!--<h3>{{ '当前数量为：'+$store.state.count }}</h3>-->
<h3>{{ $store.getters.optCount }}</h3>
</div>
</template>
counter.vue
<template>
<div>
<input type="button" value="减少" @click="remove">
<input type="button" value="增加" @click="add">
<br>
<input type="text" v-model="$store.state.count">
</div>
</template>
<script>
export default {
data() {
return {
// count: 0
};
},
methods: {
add() {
// 虽然可以实现，但不要这么用，后期维护困难
// 不符合 vuex 的设计理念
// this.$store.state.count++;
this.$store.commit('increment');
},
remove() {
this.$store.commit('subtract', {c: 3, d: 2});
}
}
};
</script>
总结：
- state 中的数据，不能直接修改，如果想要修改，必须通过 mutations
- 如果组件想要直接从 state 上获取数据：需要 this.$store.state.***
- 如果组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit(‘方法的名称’，唯一的一个参数)
- 如果 store 中 state 上的数据，在对外提供的时候，需要做一层包装，那么，推荐使用 getters，如果需要使用 getters，则用 this.$store.getters.***
附加：
- 应用场景：商城购物车的商品个数添加