1.引言
下面我将以一个简单的计数器作为例子来使用vuex。
2.vuex通信原理讲解
之前版本的通信处理:
父子组件:直接通过Props属性
兄弟组件:跟组件APP.vue组件下面有A.vue和B.vue两个子组件
复制代码
A组件和B组件之间的通信过程是这样的:
A组件:老爸,帮我传递个消息给B组件。(这时候A.vue dispatch 一个事件给 APP.vue)
APP组件:就是干(APP.vue 监听A.vue的 dispatch事件,同时需要broadcast一个事件给B组件)
B组件:收到信息(通过on监听App.vue组件的分发事件)
复制代码
vuex通信原理
具体逻辑如下
用户在组件中的输入操作触发 action 调用;
Actions 通过分发 mutations 来修改 store 实例的状态;
Store 实例的状态变化反过来又通过 getters 被组件获知。
复制代码
3.安装使用vuex(简易版本)
- 3.1 首先通过命令行生成项目结构
$ vue init webpack vuex
$ cnpm install
安装vuex(vuex会添加到dependencies中)
$ npm install vuex --save
复制代码
- 3.2 将store相关的代码分离出来
- 在src文件夹下面新建store文件夹
- 在store文件夹下面新建 index.js 文件 index.js
<template>
<div class="hello">
<p>{{count}}
<button @click="inc">+</button>
<button @click="dec">-</button>
</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
computed: {
count() {
return this.$store.state.count
}
},
methods: {
inc() {
this.$store.commit('inc')
},
dec() {
this.$store.commit('dec')
}
}
}
</script>
复制代码
- 3.3 在main.js中引入store文件 main.js
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
复制代码
- 3.4 在HelloWorld.vue中使用store里面的count变量 HelloWorld.vue
<template>
<div class="hello">
<p>{{count}}
<button @click="inc">+</button>
<button @click="dec">-</button>
</p>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count
}
},
methods: {
inc() {
this.$store.commit('inc')
},
dec() {
this.$store.commit('dec')
}
}
}
</script>
复制代码
完成到这一步 , 上述例子中的 this.$store.state.count 就可以使用了。我们就可以实现计数的功能。
4.组件化使用vuex,加入vuex中的核心概念(state,getters,mutations,actions)下面就直接上代码了,毕竟跑起来才是真理。
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import vuex from 'vuex'
import store from './store'
Vue.use(vuex);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
复制代码
HelloWorld.vue
<template>
<div class="hello">
<p>
Value: {{ count }}
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
</template>
<script>
import {mapGetters, mapActions} from 'vuex'
export default {
created() {
console.log(this.$store)
},
computed: mapGetters([
'count'
]),
methods: mapActions([
'increment',
'decrement'
])
}
</script>
复制代码
actions.js
export const increment = ({ commit }) => commit('increment')
export const decrement = ({ commit }) => commit('decrement')
复制代码
mutations.js
export const increment = state => {
state.count++
}
export const decrement = state => {
state.count--
}
复制代码
getters.js
export const count = state => state.count
复制代码
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as actions from './action'
import * as mutations from './mutataions'
Vue.use(Vuex);
const state = {
count: 0
}
export default new Vuex.Store({
state,
getters,
actions,
mutations
})
复制代码