vuex,咱交个朋友
2017-03-28 本文已影响0人
Candy程
初识,我觉得你挺好
每一个vuex应用的核心是store。vuex的突出特质为:
- vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
- 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(store.commit) mutations。如以下代码:
//创建一个store
// 如果在模块化构建系统中,在开头应调用了 Vue.use(Vuex)
const store = Vuex.Store({
state: {
count: 0
},
motations: {
increment (state) {
state.count++
}
}
})
//store.state 来获取状态对象, store.commit 方法触发状态变更
store.commit('increment')
console.log(store.state.count) // 1
- 其主要包括state、motations、getters、action和modules。
靠近,我说你觉得我怎样
vue 组件中获得 vuex 状态的方法主要有两种:
- 在组件的计算属性中返回。
缺点:在模块化的构建系统中,在每个需要使用 state 的组件中需要频繁地导入,并且在测试组件时需要模拟状态。 - 将状态从根组件『注入』到每一个子组件中
在根组件(main.js)中注入的方法:
const app = new Vue({
el: '#app',
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
store,
components: { Counter },
template: `
<div class="app">
<counter></counter>
</div>
`
})
通过上述代码,store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到:
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
哪些状态该放入vuex,哪些状态作为局部状态更好呢??
其实,这个问题完全由习惯和开发需要决定。个人认为,对于多组件共享的状态应该放入vuex,严格属于单组件的状态还是乖乖作为组件的局部状态为好。