Vuex简介
官方描述Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
个人短见:Vuex为方便存储、改变全局变量,实现数据、行为和视图的逻辑分离和状态同步。
Vuex的4个概念state、getters、mutations、actions。具体描述浏览文档
构建
在src目录下建一下文件结构
src
store //总目录
modules // 模块目录
counter.js
actions.js
getters.js
index.js //vuex索引
mutation-types.js
mutations.js //
注意:
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
实例
目录变动
src
componenets //新建
Counter.vue //新建
CounterStore.vue //新建
foo.vue // 文件移动
无Vuex的测试实例
Counter.vue为无Vuex的测试实例,代码如下:
//Counter.vue
<template>
<div>
<text class="title">Clicked: {{ count }} times, count is {{ evenOrOdd }}.</text>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">Increment if odd</button>
<button @click="incrementAsync">Increment async</button>
</div>
</template>
<script>
export default {
data: {
count : 0,
},
computed: {
count:function () {
console.log('this.count='+this.count);
return this.count;
},
evenOrOdd : function () {
return this.count % 2 === 0 ? 'even':'odd';
}
},
methods: {
increment (state) {
this.count++
},
decrement (state) {
this.count--
},
incrementIfOdd ({ commit, state }) {
if ((this.count + 1) % 2 === 0) {
this.increment();
}
},
incrementAsync ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
this.increment();
resolve()
}, 1000)
})
}
}
}
</script>
//entry.js
import Counter from './components/Counter.vue'
var vm = new Vue(Vue.util.extend(
{ el: '#root',
store,
}, Counter ))
浏览器运行结果如下:
带Vuex的测试实例
主要代码如下:
entry.js
var vm = new Vue(Vue.util.extend(
{ el: '#root',
store,
}, CounterStore))
//CounterStore.vue
<template>
<div>
<text class="title">Clicked: {{ getCount }} times, count is {{ evenOrOdd }}.</text>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">Increment if odd</button>
<button @click="incrementAsync">Increment async</button>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
computed: mapGetters([
'evenOrOdd',
'getCount'
]),
methods: mapActions([
'increment',
'decrement',
'incrementIfOdd',
'incrementAsync'
])
}
</script>
//store/modules/countr.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as types from '../mutation-types'
const state = {
count: 0
}
const mutations = {
[types.Counter_Increment] (state) {
state.count++
},
[types.Counter_Decrement] (state) {
state.count--
}
}
const actions = {
increment ({commit}) {
commit(types.Counter_Increment)
},
decrement ({commit}) {
commit(types.Counter_Decrement)
},
incrementIfOdd ({ commit, state }) {
if ((state.count + 1) % 2 === 0) {
commit(types.Counter_Increment)
}
},
incrementAsync ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit(types.Counter_Increment)
resolve()
}, 1000)
})
}
}
const getters = {
evenOrOdd : state => state.count % 2 === 0 ? 'even':'odd',
getCount : state=> state.count
}
export default {
state,
getters,
actions,
mutations
}
运行结果也如上图。
vue的数据更新主要通过数据绑定,通过computed来实现,当有data中的参数改变时会重绘并调用computed和data里的值。具体描述请查看Weex或者Vue文档。
当使用Vuex,差别不大,也是数据绑定,通过mapGetters和mapActions将computed方法映射到store中,当store中数据有变化时同样会导致重绘。
普通数据更新步骤
methods=>data=>computed
Store数据更新步骤
action => mutations => state =>重绘=>computed=>getters