vuex的语义

vuex是一个专门为vue.js设计的集中式状态管理架构,简单的说就是data中需要共用的属性。

安装vuex

cnpm install vuex --save

入门案例

新建vuex文件夹在src下面，然后在内部
新建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
})

注意：import的vue和vuex一定要是小写，state，mutations都是固定写法，其中mutations就类似methods，state就类似data.


新建Count.vue文件
<template>
    <div>
        <h2>{{msg}}</h2>
        <h2>{{ $store.state.count }}</h2>
         <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('reduce')">-</button>
    </div>
</template>
<script>
    import store from '@/vuex/store';
    export default{
        data(){
            return{
                msg:"Hello Count!"
            }
        },
        store,
    }
</script>
注意：一定要导入store文件，同时在script中添加store。
使用方法利用，commit()
$store.commit('reduce')

state：状态对象

在模板文件中直接{{msg}}这样使用state的属性值

方式一：computed

在要使用该state属性的模板文件中，
利用computed计算方法
computed:{
    count(){
        return this.$store.state.count;
    }
}
注意：return时候前面加上this。

方式二：mapState

在模板文件中导入
import {mapState} from 'vuex';
注意一定要给mapState加上{}.
然后：
computed:mapState({
    count:state=>state.count
})

方式三(常用方式)

computed:mapState(['count'])

mutations：改变状态对象值的方法

传递参数：
add(state,n){
        state.count+=n;
},
 <button @click="$store.commit('add',10)">+</button>

简化click的书写：
<button @click="reduce">-</button>
import {mapState,mapMutations} from 'vuex';
methods:mapMutations(['reduce'])

完整案例：
<template>
    <div>
        <h2>{{msg}}</h2>
        <h2>{{ $store.state.count }} --{{count}}</h2>
         <button @click="$store.commit('add',10)">+</button>
        <button @click="reduce">-</button>
    </div>
</template>
<script>
    import store from '@/vuex/store';
    import {mapState,mapMutations} from 'vuex';
    export default{
        data(){
            return{
                msg:"Hello Count!"
            }
        },
        store,
        computed:mapState(['count']),
        methods:mapMutations(['reduce'])
    }
</script>
其他文件不变。

getters计算过滤操作

...是扩展运算符

store.js文件中：
const getters={
    count(state){
        return state.count+=100;
    }
}
然后把store对外：
export default new Vuex.Store({
    state,mutations,getters
})


Count.vue文件中：
import {mapState,mapMutations, mapGetters} from 'vuex';
computed:{
    ...mapState(['count']),
    // count(){
//returnthis.$store.getters.count;
            // }
        ...mapGetters(['count'])
}

说明：注释的写法和...mapGetters(['count'])是等效的，而且不需要导入
mapGetters，但是...mapGetters(['count'])才是最常用写法。
补充：...扩展函数时候，是针对之前函数返回多个值的解决方案，之前函
数返回多个值，要封装成数组或者对象，本质还是一个值。...扩展函数返
回可以是多个值，此时例如...mapSate(['count'])如果只有这一个条目省
略...也可行，但是可能还有...mapState(['number'])等等其他变量的计算属
性，所以针对mapState函数其实是返回了多个值，才需要...进行扩展

actions异步修改状态

mutations是同步修改

store.js文件中：
const actions={
    addAction(context){
        context.commit('add',10)
    },
    reduceAction({commit}){
        commit('reduce')
    }
}
说明：action是可以直接使用mutations中的方法的，上面就是两种方式，注意context和{commit}作为参数的区别。

Count.vue文件中：
methods:{
    ...mapMutations(['reduce']),
    ...mapActions(['addAction','reduceAction'])
}

module模块组(不常用)

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

声明模块组：
在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下：
const moduleA={
    state,mutations,getters,actions
}
const moduleA={
    state,mutations,getters,actions
}
声明好后，我们需要修改原来 Vuex.Stroe里的值：


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

export default new Vuex.Store({
    modules:{a:moduleA}
})
在模板中使用
现在我们要在模板中使用count状态，要用插值的形式写入。

<h3>{{$store.state.a.count}}</h3>
<h3>{{$store.state.a.count}}</h3>
如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：


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

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