vue状态管理的使用详讲---vuex

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。比如：我们有几个页面要显示用户名称和用户等级，或者显示用户的地理位置。如果我们不把这些属性设置为状态，那每个页面遇到后，都会到服务器进行查找计算，返回后再显示。在中大型项目中会有很多共用的数据，vuex可以方便的进行状态管理。

项目准备

初始化vue项目

vue create test-vuex
复制代码

引入vuex

1. 命令行输入一下命令安装vuex，这里用淘宝镜像cnpm安装。

cnpm install vuex --save
复制代码

2. 新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入我们的vue和vuex，并用Vue.use进行引用

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
复制代码

3. 下面开始用程序进行vuex使用演示

• 现在我们store.js文件里增加一个常量对象。

const state={
    count:1
}
复制代码

• 用export default 封装代码，让外部可以引用。

export default new Vuex.Store({
    state
})
复制代码

• 新建一个vue的模板，位置在components文件夹下，名字叫test.vue。

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{$store.state.count}}</h3>
    </div>
</template>
<script>
    import store from '@/vuex/store'
    export default{
        data(){
            return{
                msg:'Hello Vuex',
            }
        },
        store
    }
</script>
复制代码

• 在store.js文件中加入两个改变state的方法

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}
复制代码

• 在test.vue模板中加入两个按钮，并调用mutations中的方法

<div>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('reduce')">-</button>
</div>
复制代码

• 完整代码如下

<!--test.vue-->
<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <h3>{{$store.state.count}}</h3>
        <div>
            <button @click="$store.commit('add')">+</button>
            <button @click="$store.commit('reduce')">-</button>
        </div>
    </div>
</template>
<script>
import store from "@/vuex/store";
export default {
  data() {
    return {
      msg: "Hello Vuex"
    };
  },
  store
};
</script>
复制代码

<!--store.js-->
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const state={
    count:1
}

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

export default new Vuex.Store({
    state,mutations
})
复制代码

下面分开介绍其核心概念：

state访问状态对象

三种赋值方式将状态对象赋值给内部对象，也就是把stroe.js中的值，赋值给我们模板里data中的值。

• 通过computed的计算属性直接赋值

computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值

computed:{
    count(){
        return this.$store.state.count;
    }
}
复制代码

• 通过mapState的对象来赋值

我们首先要用import引入mapState。

import {mapState} from 'vuex';
复制代码

然后还在computed计算属性里写如下代码：

computed:mapState({
        count:state=>state.count
 })
复制代码

• 通过mapState的数组来赋值

 computed:mapState(["count"])
复制代码

Mutations修改状态

• $store.commit( )

<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>
复制代码

<!--store.j-->
const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}
复制代码

• 传值：

在实际项目中我们常常需要在修改状态时传值

<!--store.js-->
const mutations={
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}
复制代码

在test.vue里修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10.

<p>
   <button @click="$store.commit('add',10)">+</button>
   <button @click="$store.commit('reduce')">-</button>
</p>
复制代码

• 模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。

1. 在模板count.vue里用import 引入我们的mapMutations：

import { mapState,mapMutations } from 'vuex';
复制代码

2. 在模板的script标签里添加methods属性，并加入mapMutations

 methods:mapMutations([
        'add','reduce'
]),
复制代码

通过上边两部，我们已经可以在模板中直接使用我们的reduce或者add方法了，就像下面这样。

<button @click="reduce">-</button>
复制代码

getters计算过滤操作

getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

• getters基本用法：

我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.

<!--store.js-->
const getters = {
    count:function(state){
        return state.count +=100;
    }
}
复制代码

写好了gettters之后，我们还需要在Vuex.Store()里引入

export default new Vuex.Store({
    state,mutations,getters
})
复制代码

在store.js里的配置算是完成了，我们需要到模板页对computed进行配置。在vue的构造器里边只能有一个computed属性，如果你写多个，只有最后一个computed属性可用

computed:{
    ...mapState(["count"]),
    count(){
        return this.$store.getters.count;
    }
},
复制代码

• 用mapGetters简化模板写法：

首先用import引入我们的`mapGetters

import { mapState,mapMutations,mapGetters } from 'vuex';
复制代码

在computed属性中加入mapGetters

...mapGetters(["count"])
复制代码

actions异步修改状态

• 在store.js中声明actions

actions是可以调用Mutations里的方法的

const actions ={
    addAction(context){
        context.commit('add',10)
    },
    reduceAction({commit}){
        commit('reduce')
    }
}
复制代码

在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。这两个方法传递的参数不一样。

1. context：上下文对象，这里你可以理解称store本身。
2. {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

• 模板中的使用

我们需要在test.vue模板中编写代码，让actions生效。

<p>
  <button @click="addAction">+</button>
  <button @click="reduceAction">-</button>
</p>
复制代码

用import把我们的mapActions引入才可以使用

改造一下我们的methods方法，首先还是用扩展运算符把mapMutations和mapActions加入

methods:{
    ...mapMutations([  
        'add','reduce'
    ]),
    ...mapActions(['addAction','reduceAction'])
},
复制代码

• 增加异步检验

我们现在看的效果和我们用Mutations作的一模一样，肯定有的小伙伴会好奇，那actions有什么用，我们为了演示actions的异步功能，我们增加一个计时器（setTimeOut）延迟执行。在addAction里使用setTimeout进行延迟执行

setTimeout(()=>{context.commit('reduce')},3000);
console.log('我比reduce提前执行');
复制代码

module模块组

随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。

• 声明模块组：

const moduleA={
    state,mutations,getters,actions
}
复制代码

声明好后，我们需要修改原来 Vuex.Stroe里的值：

export default new Vuex.Store({
    modules:{a:moduleA}
})
复制代码

• 在模板中使用

<h3>{{$store.state.a.count}}</h3>
复制代码

如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：

computed:{
    count(){
        return this.$store.state.a.count;
    }
},
复制代码

转载于:https://juejin.im/post/5c6f5024f265da2ddd4a5cb8