Vuex简介
1. Vuex简介
官方解释：
1. Vuex是一个专门为Vue.js应用程序开发的状态管理模式
2. Vuex采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可以测的发生发生改变
3. Vuex页集成到Vue的官方调试工具devtools extension，提供了诸如零配件的time-travel调试，状态快照导入导出等高级调试功能
状态管理到底是什么
1. 可以将其看作把需要多个组件共享的变量全部存储在一个对象里里面
2. 将这个对象放在顶层的Vue实例中，让其他组件可以使用
3. 这样的话，所有组件都可以来共享这个对象中的所有属性了
什么时候需要用到多组件共享同一种状态呢
1. 在大型开发中，会遇到多个界面间的共享
2. 如登陆状态，用户名，头像，位置
3. 在多个页面中加入购物车，最后要进行汇总
2. 创建一个store仓库并向其内部添加变量
1. 安装Vuex
终端运行指令：npm install vuex --save
2. 新建一个store仓库文件夹，在其中新建一个index.js(用法类似于路由router)
3. 在index.js文件中引用Vuex插件
import Vue from 'vue' import Vuex from 'vuex' // 1. 使用插件 Vue.use(Vuex); // 2. 创建对象 const store = new Vuex.Store({ state:{ counter: 1000, }, mutations:{}, actions:{}, getters:{}, modules:{}, }) // 3. 导出对象 export default store
4. 在入口文件main.js中，引入store插件并挂载到主组件上
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
3. devtools安装
仓库中的变量我们可以通过调用的形式任意修改，但是这无法追踪是哪个页面修改的，因此
安装步骤：
1. Chrome浏览器 -> 扩展程序 -> 搜索：devtools -> 添加Vue.js.devtools
2. 检查：Chrome浏览器中的开发者模式下，可以找到Vue栏目即表示图哦站程序安装成功
4. store中的参数修改和devtools的应用
1. 在store中的到处对象中的mutations中添加方法
mutations:{ increment(state){ state.counter++; }, decrement(state){ state.counter--; }, },
2. 在各个修改仓库参数的页面中，发送请求，通过启动mutations中的方法实现变量修改
// 在相应地方调用方法 <button @click="add()">增加</button> // 在相应方法中发送修改变量的请求 methods: { add(){ this.$store.commit('increment'); }, minus(){ this.$store.commit('decrement'); }, }
5. Vuex中的核心概念
Vuex导出对象中，包含几个元素，这些元素都是对象
6. Vuex的原理
1. 每一个vue的插件，都需要一个公开的install方法，vuex也不例外
// src/store.js
export function install (_Vue) {
if (Vue && _Vue === Vue) {
return
}
Vue = _Vue
applyMixin(Vue)//在所有组件的beforeCreate注入了设置this.$store这样的一个对象,
//在任意组件中执行this.$store都能找到store对象
}
2. Vuex.Store的构造函数中，有一堆初始化以及resetStoreVM(this,state)整个vuex的关键
// src/store.js
function resetStoreVM (store, state, hot) {
// 省略无关代码
Vue.config.silent = true
//本质：将我们传入的state作为一个隐藏的vue组件的data
//也就是说，我们的commit操作，本质上其实是修改这个组件的data
store._vm = new Vue({
data: {
$$state: state
},
computed
})
}
//this.$store._vm.$data.$$state===this.$store.state
