vuex是一个专门为vue.js设计的集中式状态管理架构。什么是状态?可以把它理解为data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。
vuex共有5个核心概念:state 、getters 、mutations 、actions 、modules
先看一下vue-cli工程目录
前提准备:
①安装vue-cli + webpack 工程(不会的小伙伴可以查看我之前的博客,里面有详细介绍),然后安装vuex
②安装vuex指令:npm install vuex --save
③按照目录图创建文件
④在store.js引入vuex,代码如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
⑤注入store,在实例化 Vue对象时加入 store 对象
示例和解释:
1.state的使用
为什么要使用state?可以这么理解,我们用vue里面的data来绑定数据,但是如果有多个组件呢,如何做到共享数据呢,就必须用上state了。
Test.vue代码
<template>
<div class="test">
<p>{{ $store.state.num }}</p>
<button @click="showText">点击这里</button>
</div>
</template>
<script>
import store from '../vuex/store.js';
export default {
name: 'text',
store,
methods:{
showText(){
console.log( this.$store.state.num )
}
}
}
</script>
store.js代码
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
num:1
}
export default new Vuex.Store({
state,
})
使用方法:
$store.state.num(在模板中可以不写this,写在其他地方要在前面加上“this.”)
2.getters的使用
getters 和 vue 中的 computed 类似 , 都是用来计算state 然后生成新的数据 ( 状态 ) 的。
为什么 要使用getters?比如一个属性color,它有很多个值,比如green、blue、red等等,这时候我们就可以使用getters了,我们可以在getters里面一一声明。
Text.vue代码
<template>
<div class="test">
<p>{{ $store.state.num }}</p>
<button @click="showText()">点击这里</button>
</div>
</template>
<script>
import store from '../vuex/store.js';
export default {
name: 'text',
store,
methods:{
showText(){
console.log( this.$store.state.isNow )
console.log( this.$store.getters.notIsNow )
}
},
}
</script>
store.js代码
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
num:1,
isNow:true
}
const getters = {
notIsNow:function(state){
return !state.isNow
}
}
export default new Vuex.Store({
state,getters
})
使用方法:
$store.getters.notIsNow
3.mutations的使用
为什么 要使用mutations?使用mutations是为了操作state里面的状态。
Test.vue代码
<template>
<div class="test">
<p>{{ $store.state.num }}</p>
<button @click="$store.commit('add')">点击这里</button>
</div>
</template>
<script>
import store from '../vuex/store.js';
export default {
name: 'text',
store,
}
</script>
store.js代码
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
num:1,
isNow:true
}
const mutations={
add(state){
state.num++;
},
reduce(state){
state.num--;
}
}
export default new Vuex.Store({
state,mutations
})
使用方法:
$store.commit('add')
4.actions的使用
为什么 要使用actions?请看下面的"注意"里面的内容。
Test.vue代码
<template>
<div class="test">
<p>{{ $store.state.num }}</p>
<button @click="$store.commit('add')">使用mutations点击</button>
<button @click="$store.dispatch('addAction')">使用actions点击</button>
</div>
</template>
<script>
import store from '../vuex/store.js';
export default {
name: 'text',
store,
}
</script>
store.js代码
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
num:1,
isNow:true
}
const mutations={
add(state){
state.num++;
},
reduce(state){
state.num--;
}
}
const actions = {
addAction(context){
context.commit('add')
},
reduceAction({commit}){
commit('reduce')
}
}
export default new Vuex.Store({
state,mutations,actions
})
使用方法:
$store.dispatch('addAction')
注意:
action提交的是mutations,可以是异步操作;mutations是修改数据的,必须同步。
也就是说,如果调用的是actions,然后actions触发mutations, 通过mutations修改数据。
5.mapState、mapGetters、mapMutations、mapActions的使用
为什么要使用它们,相信不难理解,我在上面四点也提及了这四种核心的使用方法,但是有没有觉得有点长呢?比如:$store.getters.notIsNow,看起来不舒服,所以就有了以下这些新写法,也能和以前写的一大串代码达到同样的作用。
Test.vue代码
<template>
<div class="test">
<p>{{ num }}</p>
<p>{{ notIsNow }}</p>
<button @click="add">使用mutations点击</button>
<button @click="addAction">使用actions点击</button>
</div>
</template>
<script>
import store from '../vuex/store.js';
import { mapState , mapGetters , mapMutations , mapActions } from 'vuex';
export default {
name: 'text',
store,
computed:{
...mapState([ 'num','isNow' ]),
...mapGetters(['notIsNow'])
},
methods:{
...mapMutations([
'add','reduce'
]),
...mapActions([
'addAction',
'reduceAction'
]),
changeMsg(){
//这里是vue methods里本身正常的方法
},
},
}
</script>
store.js代码
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
num:1,
isNow:true
}
const getters = {
notIsNow:function(state){
return !state.isNow
}
}
const mutations = {
add(state){
state.num++;
},
reduce(state){
state.num--;
}
}
const actions = {
addAction(context){
context.commit('add')
},
reduceAction({commit}){
commit('reduce')
}
}
export default new Vuex.Store({
state,getters,mutations,actions
})
使用方法:
①引入:import { mapState , mapGetters , mapMutations , mapActions } from 'vuex';
②...mapState([ 'num','isNow' ])
...mapGetters(['notIsNow'])
...mapMutations([ 'add' , 'reduce' ]),
...mapActions([ 'addAction' , 'reduceAction' ])
6.modules的使用
为什么要使用modules?当我们有很多个组件时,但是可能一部分组件共用的是某些状态,另一部分组件共用的是另一些状态,这时,为了把它们区分开来,当然,也方便我们的管理,modules自然就派上用场了。
store.js代码
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import sonOne from './store_one.js';
export default new Vuex.Store({
modules:{
'one':sonOne,
}
})
store_one.js
export default{
state : {
num:1,
isNow:true
},
getters : {
notIsNow:function(state){
return !state.isNow
}
},
mutations : {
add(state){
state.num++;
},
reduce(state){
state.num--;
}
},
actions : {
addAction(context){
context.commit('add')
},
reduceAction({commit}){
commit('reduce')
}
}
}
说明一下,如果使用了modules,除了state的使用方法变动一下,其余的均不变,
state的使用变为:$store.state.one.num,这里的one是modules的名字。
mapState简便写法:
...mapState({
num: state => state.one.num,
isNow: state => state.one.isNow,
})
end!