Vuex
Vuex 是一个专为 Vue.js 应用程序开发的
状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
- 安装：
npm install vuex --save - 此处的状态即：数据（data中的属性）
- 特点：集中式
- vuex中 store 就是数据（state）存储的容器
- 注意：
- 通过 store.count 来获取仓库中的数据（状态）
- 必须通过 mutations 中提供的方法来修改数据（状态）
当一个大型项目功能变得越来越复杂，项目中的组件越来越多
此时，各个组件之间都可能存在相互通讯的问题，如果不处理，那么各个组件之间就会相互传递数据
导致的结果就是，我们项目中的数据就不可预测了。也就是：各个组件相互影响，不知道是哪一个组件
在什么情况下修改数据
散乱的组件.jpg
用vuex来管理组件让它们集中起来.jpg
1.创建store/index.js
// 1 导入 vue
import Vue from 'vue'
// 2 导入 vuex
import Vuex from 'vuex'
// 安装 vuex 插件
Vue.use(Vuex)
const store = new Vuex.Store({
// 数据（状态）
// 读取数据：store.state.count
state: {
count: 10
},
// 用来操作数据的方法
// 修改数据：store.commit('addCount', 参数)
mutations: {
addCount(state, arg) {
// 参数：state表示 上面的 state对象
// 实现 count +1
// state.count++
state.count += arg.count
console.log(arg.abc);
console.log('这是通过 mutations 中的addCount 方法修改了count值');
}
}
})
export default store
2.在 Vue 实例中通过 store 将 vuex 与实例挂到一起
// 导入 vuex
import store from '../store'
// 3 将Vue实例与 App 挂到一起
const vm = new Vue({
el: '#app',
router,
// 将 vuex 与实例挂到一起
store,
render: c => c(App)
})
3.调用 store 中的数据
<script>
/* // 测试 vuex
fn() {
// 调用 store 中的方法
this.$store.commit('addCount', { count: 2, abc: 'aaa' })
}, */
</script>
4.展示 store 中的数据
<template>
测试：
展示 store 中的数据
<mt-button type="danger" @click="fn">测试vuex</mt-button>
{{ $store.state.count }}
</template>
