vuex新手教程(完整版整理)

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。
(就是一种向各个组件可以传参的方式)

1. 准备

用脚手架搭建一个项目
安装vuex
npm install vuex –save

新建文件夹store,并在此文件夹下新建store.js文件。项目目录,如下:
这里写图片描述

1.main.js添加

//引入vuex文件
import store from './store/store.js'//注意文件路径

2.store文件夹下的store.js

//引入我们的vue和vuex。
import Vue from 'vue'
import Vuex from 'vuex'
//使用我们vuex，引入之后用Vue.use进行引用
Vue.use(Vuex);

2.开始demo

准备工作完成后,我们只使用helloworld.vue和store.js文件
1.在helloworld.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>
    //引入store文件
    import store from '@/store/store.js'
    export default{
        data(){
            return{
                msg:'Hello Vuex',

            }
        },
        store
    }
</script>

这里写图片描述
2.store.js文件中添加

const state = {
   count:1
}

const mutations={
    add(state){
        state.count+=1;
    },
    reduce(state){
        state.count-=1;
    }
}
export default new Vuex.Store({
    state,mutations
});

这里写图片描述
完成页面,点击按钮可以+1或-1

state访问状态对象

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

通过computed的计算属性直接赋值
通过mapState的对象来赋值
通过mapState的数组来赋值

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

(helloword.vue)

computed:{
         count(){
             return this.$store.state.count;
         }
     },

这里写图片描述

 这里需要注意的是 return this.$store.state.count这一句，一定要this，要不你会找不到$store的.

###2.通过mapState的对象来赋值

import {mapState} from 'vuex';//用import引入mapState。
computed:mapState({
count:state=>state.count  //理解为传入state对象，修改state.count属性
       }),

这里写图片描述

3.通过mapState的数组来赋值

computed:mapState(["count"])

这个算是最简单的写法了，在实际项目开发当中也经常这样使用。
这里写图片描述

Mutation修改状态

他是同步事务.
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

前面我们已经用到过了
这里写图片描述
要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

提交载荷（Payload）
你可以向 store.commit 传入额外的参数，即 mutation 的载荷（payload）：
现在store.js文件里给add方法加上一个参数n。

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

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

<button @click="$store.commit('add',10)">+10</button>
<button @click="$store.commit('reduce')">-1</button>

模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。
例如：@click=”reduce” 就和没引用vuex插件一样。
在helloworld.vue上进行如下更改

import { mapState,mapMutations } from 'vuex';
 methods:mapMutations([
        'add','reduce'
]),

<button @click="add(10)">+10</button>
<button @click="reduce">-1</button>

这里写图片描述
或者这么写,也可以

<button @click="add10(10)">+10</button>
<button @click="reduce1">-1</button>

methods:{
...mapMutations({
add10: 'add' ,// 将this.add10() 映射为 this.$store.commit('add')
reduce1:'reduce'//其实就是方法又命名了一下
})
},

getters计算过滤操作

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

getters基本用法：

比如我们现在要对store.js文件中的count进行一个计算属性的操作，就是在它输出前，给它加上100.我们首先要在store.js里用const声明我们的getters属性。

const getters = {
    count:function(state){
        return state.count +=100;
    }
}
computed:{
    ...mapState(["count"]),
    count(){
        return this.$store.getters.count;
    }
},

需要注意的是，你写了这个配置后，在每次count 的值发生变化的时候，都会进行加100的操作。
这里写图片描述

用mapGetters简化模板写法

首先用import引入我们的mapGetters

import { mapState,mapMutations,mapGetters } from 'vuex';

在computed属性中加入mapGetters

...mapGetters(["count"])

这里写图片描述

actions异步修改状态

actions是异步的改变state状态，而Mutations是同步改变状态
在actions里写了两个方法addAction和reduceAction，在方法体里，我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。

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

<button @click="$store.dispatch('addAction',10)">+</button>
<button @click="$store.dispatch('reduceAction')">-</button>

这里写图片描述
这样就能看到效果了,

mapActions 辅助函数

在组件中分发 Action
这里写图片描述

增加异步检验

  addAction(context){
        setTimeout(() => {
            context.commit('add',10)
          }, 3000)

module模块组

随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。那今天我们就学习一下module：状态管理器的模块组操作。

const moduleA={
    state
}

export default new Vuex.Store({
    modules:{a:moduleA}
})

<h3>{{$store.state.a.count}}</h3>
或
computed:{
    count(){
        return this.$store.state.a.count;
    }
},

这里写图片描述