vuex简单介绍与示例
Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
为什么使用vuex?
new Vue({
// state:驱动应用的数据源
data () { return {count: 0}},
// view:以声明方式将 state 映射到视图
template: ` <div>{{ count }}</div>`,
// actions:响应在 view 上的状态变化。
methods: {
increment () {this.count++}
}
})
单向数据流
当遇到多个组件共享状态时,多个视图依赖于同一状态,来自不同视图的行为需要变更同一状态,这时会很棘手
vuex可以满足复杂应用中多个组件进行状态共享的需求,把组件的共享状态抽取出来,以一个全局单例模式管理:
使用
安装
-
CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/vuex@2.0.0"></script>
-
npm
npm install --save vue npm install --save vuex
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
核心
每一个 Vuex 应用的核心就是 store
。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:
- Vuex 的状态存储是响应式的
- 不能直接改变 store 中的状态。唯一途径是显式地commit mutation
简单实例
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@2.0.0"></script>
//仅需要提供一个初始 state 对象和一些 mutation:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
现在可以:
-
通过
store.state
来获取状态对象, -
通过
store.commit
方法触发状态变更
store.commit('increment') //提交变更
console.log(store.state.count) // -> 1
组件访问vuex
Vuex 提供了一个从根组件向所有子组件,以 store
选项的方式“注入”该 store 的机制:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
var vm=new Vue({
el: '#app',
store, //注入store
methods: {
increment() { //该方法先是提交变更,接着输出状态
this.$store.commit('increment')
console.log(this.$store.state.count)
}
}
})
这时候父组件及其子组件都可以通过this.$store
访问到状态及提交变更。试从组件的方法提交一个变更: