1、步骤
1.1、安装vuex
在控制台执行命令:npm install --save vuex
1.2、在src下创建vuex的核心管理模块store.js
/**
* vuex的核心管理模块
*/
import Vue from 'vue'
import Vuex from 'vuex'
// 声明使用vuex插件
Vue.use(Vuex)
// 定义state状态对象
const state = {
count: 0
}
// 包含多个更新state的函数对象,由actions内的函数触发调用
const mutations = {
addFunc(state) {
state.count++
},
minusFunc(state) {
state.count--
}
}
// 包含多个间接更新state的函数对象(由vue组件触发调用)
const actions = {
add({commit}) {
// 触发调用mutations的addFunc函数
commit('addFunc')
},
minus({commit}) {
// 触发调用mutations的minusFunc函数
commit('minusFunc')
},
// {commit, state},这种写法表示函数的入参是对象,且其中有commit和state属性
addIfCountOdd({commit, state}) {
if (state.count % 2 !== 0) {
commit('addFunc')
}
},
addByAsync({commit}) {
setTimeout(() => {
// 触发调用mutations的addFunc函数
commit('addFunc')
}, 1000)
}
}
// 包含多个计算属性函数的对象
const getters = {
countType(state) {
return state.count % 2 === 0 ? '偶数' : '奇数'
}
}
// 向外暴露对象
export default new Vuex.Store({
state, // 状态对象
mutations, // 包含多个更新state的函数对象
actions, // 包含多个间接更新state的函数对象(由vue组件调用)
getters // 包含多个计算属性函数的对象
})
1.3、在vue入口main.js中引入vuex的核心管理模块
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入vuex的核心管理模块
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
store // 所有的vue组件实例中会增加一个$store属性
})
1.4、在vue组件中使用
<template>
<div>
<p>count is:{{$store.state.count}},countType is {{countType}}</p>
<button @click="add">add</button>
<button @click="minus">minus</button>
<button @click="addIfCountOdd">addIfCountOdd</button>
<button @click="addByAsync">addByAsync</button>
</div>
</template>
<script>
export default {
methods: {
add() {
// 触发调用vuex的核心管理模块中actions的add函数
this.$store.dispatch('add')
},
minus() {
// 触发调用vuex的核心管理模块中actions的minus函数
this.$store.dispatch('minus')
},
addIfCountOdd() {
// 触发调用vuex的核心管理模块中actions的addIfCountOdd函数
this.$store.dispatch('addIfCountOdd')
},
addByAsync() {
// 触发调用vuex的核心管理模块中actions的addByAsync函数
this.$store.dispatch('addByAsync')
}
},
computed: {
countType() {
// 读取vuex的核心管理模块中计算属性countType的值
return this.$store.getters.countType
}
}
}
</script>
<style scoped>
</style>
2、改进
2.1、对vue组件改进1
<template>
<div>
<p>count is:{{count}},countType is {{countType}}</p>
<button @click="add">add</button>
<button @click="minus">minus</button>
<button @click="addIfCountOdd">addIfCountOdd</button>
<button @click="addByAsync">addByAsync</button>
</div>
</template>
<script>
// 引入vuex的mapState, mapGetters, mapActions映射
import {mapState, mapGetters, mapActions} from 'vuex'
export default {
methods: {
// vue组件中的方法和vuex核心管理模块的actions中的函数名一致时的写法
...mapActions(['add', 'minus', 'addIfCountOdd', 'addByAsync'])
},
computed: {
// vue组件中的变量名和vuex核心管理模块的state中的属性名一致时的写法
...mapState(['count']),
// vue组件中的变量名和vuex核心管理模块的getters中的函数名一致时的写法
...mapGetters(['countType'])
}
}
</script>
<style scoped>
</style>
2.2、对vue组件改进2
<template>
<div>
<p>count is:{{mycount}},countType is {{mycountType}}</p>
<button @click="myadd">add</button>
<button @click="myminus">minus</button>
<button @click="myaddIfCountOdd">addIfCountOdd</button>
<button @click="myaddByAsync">addByAsync</button>
</div>
</template>
<script>
// 引入vuex的mapState, mapGetters, mapActions映射
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
methods: {
// vue组件中的方法和vuex核心管理模块的actions中的函数名不一致时的写法
// 用对象的方式指定映射关系
...mapActions({
myadd: 'add',
myminus: 'minus',
myaddIfCountOdd: 'addIfCountOdd',
myaddByAsync: 'addByAsync'
})
},
computed: {
// vue组件中的变量名和vuex核心管理模块的state中的属性名不一致时的写法
// 用对象的方式指定映射关系
...mapState({mycount: 'count'}),
// vue组件中的变量名和vuex核心管理模块的getters中的函数名不一致时的写法
// 用对象的方式指定映射关系
...mapGetters({mycountType: 'countType'})
}
}
</script>
<style scoped>
</style>