这个状态自管理应用包含以下几个部分:
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分 的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:
那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态:每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。
<body class="">
<script src="../js/vue.js"></script>
<script src="../js/vuex.js"></script>
<script src="../js/vue-router.js"></script>
<div id="app">
<my-component></my-component>
</div>
<script>
const store = new Vuex.Store({
state: {
count: 10
},
mutations: {
increment: state => state.count++
}
})
const Counter = {
template: `<div>
<div>{{count}}</div>
<button v-on:click="increment">add</button>
</div>`,
computed: {
count() {
return store.state.count
}
},
methods: {
increment() {
store.commit("increment")
}
}
}
const app = new Vue({
el: "#app",
components: {
'my-component': Counter
}
})
</script>
</body>
然而,这种模式导致组件依赖全局状态单例。在模块化的构建系统中,在每个需要使用 state 的组件中需要频繁地导入,并且在测试组件时需要模拟状态。
Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中
<body class="">
<script src="../js/vue.js"></script>
<script src="../js/vuex.js"></script>
<script src="../js/vue-router.js"></script>
<div id="app">
</div>
<script>
const store = new Vuex.Store({
state: {
count: 12
},
})
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count() {
return this.$store.state.count
}
}
}
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
// template里面的Counter首字母大写小写都可以
</script>
</body>
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,
// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
经过mapState函数调用后的结果,如下所示:
import { mapState } from 'vuex'
export default {
// ...
computed: {
count() {
return this.$store.state.count
},
countAlias() {
return this.$store.state['count']
},
countPlusLocalState() {
return this.$store.state.count + this.localCount
}
}
}
当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
(adsbygoogle = window.adsbygoogle || []).push({});