State
单一状态树
一、什么是单一状态树
- Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (Single source of truth)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
- 但是,它是什么呢?我们来看一个生活中的例子。
- 我们知道,在国内我们有很多的信息需要被记录,比如上学时的个人档案,工作后的社保记录,公积金记录,结婚后的婚姻信息,以及其他相关的户口、医疗、文凭、房产记录等等(还有很多信息)。
- 这些信息被分散在很多地方进行管理,有一天你需要办某个业务时(比如入户某个城市),你会发现你需要到各个对应的工作地点去打印、盖章各种资料信息,最后到一个地方提交证明你的信息无误。
- 这种保存信息的方案,不仅仅低效,而且不方便管理,以及日后的维护也是一个庞大的工作(需要大量的各个部门的人力来维护,当然国家目前已经在完善我们的这个系统了)。
- 这个和我们在应用开发中比较类似:
- 如果你的状态信息是保存到多个Store对象中的,那么之后的管理和维护等等都会变得特别困难。
- 所以Vuex也使用了单一状态树来管理应用层级的全部状态。
- 单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护。
二、在 Vue 组件中获得 Vuex 状态
- 引入Vuex:(类似于Vue-Router的使用方式)
这里我们使用一个计数器的案例做演示,首先,我们需要在某个地方存放我们的Vuex代码,这里,我们先创建一个文件夹
store
,并且在其中创建一个index.js
文件,并在index.js
文件中写入如下代码:
import Vue from 'vue'
import Vuex from 'vuex'
// 1. 安装插件
Vue.use(Vuex)
// 2. 创建对象
const store = new Vuex.Store({
state: {
counter: 0,
},
mutations: {
increment(state) {
state.counter++
},
decrement(state) {
state.counter--
}
}
})
// 3.导出store对象
export default store
- 挂载到Vue实例中
其次,我们让所有的Vue组件都可以使用这个
store
对象,来到main.js
文件,导入store
对象,并且放在new Vue
中
这样,在其他Vue组件中,我们就可以通过this.$store
的方式,获取到这个store
对象了
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
render: h => h(App)
})
- 使用Vuex管理counter
<template>
<div>
<h2>{{$store.state.counter}}</h2>
<h2>{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script>
export default {
name: 'HelloVuex',
computed: {
counter() {
return this.$store.state.counter
}
},
methods: {
increment() {
this.$store.commit('increment')
},
decrement() {
this.$store.commit('decrement')
}
},
}
</script>
<style scoped>
</style>
三、Vuex中的State使用总结
- 好的,这就是使用Vuex最简单的方式了。
- 我们来对使用步骤,做一个简单的小结:
- 每一个 Vuex 应用的核心就是
store
(仓库)。“store”
基本上就是一个容器,它包含着你的应用中大部分的状态(state)
- 提取出一个公共的
store
对象,用于保存在多个组件中共享的状态 - 将
store
对象放置在new Vue
对象中,这样可以保证在所有的组件中都可以使用到 - 在其他组件中使用
store
对象中保存的状态即可- 通过
this.$store.state.属性
的方式来访问状态 - 通过
this.$store.commit('Mutations中方法')
的方式来修改状态
- 通过
- 每一个 Vuex 应用的核心就是
注意事项:
- 我们通过显式地提交Mutations的方式,而非直接改变
$store.state.counter
来修改counter
状态。 - 这是因为Vuex可以更明确的追踪状态的变化,同时可以使用官方提供的调试工具跟踪每一次的状态改变,所以不要直接改变
$store.state.counter
的值。