state
- 我们先来看一个简单的state实例使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
- 那么我们应该如何在vue组件中展示状态呢？由于Vuex的状态存储是响应式的，从store实例中读取状态最简单的方法就是在计算属性中返回某个状态，如下：
//创建一个Counter组件
const Counter = {
data() { return {} },
template: `<div>{{ count }}</div>`,
computed: {
count () {
return store.state.count
}
}
}
- 每当 store.state.count 变化的时候，都会重新求取计算属性，并刷新界面。
需要注意的是如果你把 store.state.count 放在data中， store.state.count 的变化是不会主动触发直接访问带store对象的，所以这样写五一是会报错的。
这种模式依赖于全局的管理员 store ，如果模块多了，意味着每个模块或者页面只要用到了这个state里面的数据，都得把store一如进来，这样的操作确实有点难受。当然，官方肯定是不允许有这样难受的操作出现的：
Vuex 通过store选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用Vue.use(Vuex)）;
const app = new Vue({
el:'#app'
//把 store 对象提供给 “store” 选项，
//这可以把 store 的实例注入所有的子组件
store,
//子组件
components: { Counter },
template:`
<div class="app">
<counter></counter>
</div>
`
})
- 通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问的。让我们以前更新一下Counter的实现：
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
- Vuex 的状态固然好用，但是也不要滥用：
使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。
