（Vue全家桶）Vue-vuex

楠楠

发布于 2018-09-11 11:47:21

8810

发布于 2018-09-11 11:47:21

文章被收录于专栏：郭少华

vuex入门

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。

1.安装vuex在控制命令行输入

npm install vuex --save

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

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 封装代码，让外部可以引用
export default new Vuex.Store({
    state,
    mutations
})

实现对vuex中的count进行加减预览。

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <H3>{{$store.state.count}}</H3>
<!--在count.vue模板中加入两个按钮，并调用mutations中的方法-->
        <button @click="$store.commit('add')">+</button>
        <button @click="$store.commit('reduce')">-</button>
    </div>
</template>

<script>
import store from '@/vuex/store'

export default {
    name: 'Count',
    data(){
        return{
            msg:'Hello Vue'
        }
    },
    store
}
</script>

state访问状态对象

在文件夹下新建store.js文件，文件中引入我们的vue和vuex。

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

Vue.use(Vuex);

const state={
    count:1,
    status:'开始'
}

通过$方法赋值

  {{$store.state.count}}

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

直接可以{{count}}-{{status}}获取到state里面的值

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

通过mapState的对象来赋值

我们首先要用import引入mapState

import {mapState} from 'vuex';

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

    computed:mapState({
        count: state=>state.count,
        status: state=>state.status
    })

通过mapState的数组来赋值

我们首先要用import引入mapState

import {mapState} from 'vuex';

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

 computed:mapState(["count","status"])

Mutations修改状态

在文件夹下新建store.js文件

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


Vue.use(Vuex);

const state={
    count:1,
    status:'开始'
}

const mutations={
    //n是可以传递过来的参数
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}

export default new Vuex.Store({
    state,
    mutations
})

$store.commit( )

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

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

模板获取Mutations方法

<template>
    <div>
        <h2>{{msg}}</h2>
        <hr/>
        <H3>{{count}}-{{status}}</H3>
        <button @click="add(10)">+</button>
        <button @click="reduce">-</button>
    </div>
</template>

<script>
import store from '@/vuex/store'
//在模板count.vue里用import 引入我们的mapMutations：
import {mapState,mapMutations} from 'vuex'
export default {
    name: 'Count',
    data(){
        return{
            msg:'Hello Vue'
        }
    },
    computed:mapState(["count","status"]),
    //在模板的<script>标签里添加methods属性，并加入mapMutations
    methods:mapMutations(["add","reduce"]),
    store
}
</script>

getters计算过滤操作

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

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


Vue.use(Vuex);

const state={
    count:1,
    status:'开始'
}

const mutations={
    //n是可以传递过来的参数
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}
//二次编辑给数字后面加上单位
const getters={
    count:state=>state.count+"个"
}

export default new Vuex.Store({
    state,
    mutations,
    getters
})

getters基本用法

computed:{
        ...mapState(["count","status"]),
        count(){
            return this.$store.getters.count;
        }
    },

用mapGetters简化模板写法

    computed:{
        ...mapState(["count","status"]),
        ...mapGetters(["count"])
    },
    met

actions异步修改状态

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。

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

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


Vue.use(Vuex);

const state={
    count:1,
    status:'开始'
}

const mutations={
    //n是可以传递过来的参数
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}

const getters={
    count:state=>state.count+"个"
}

const actions={
    addAction(context){
       context.commit("add",10);
    },
    reduceAction({commit}){
        commit("reduce")
    }
}

export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

模板中的使用

<template>
    <div>
        <p>
            <button @click="addAction">+</button>
            <button @click="reduceAction">-</button>
        </p>
    </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
export default {
    name: 'Count',
    data(){
        return{
            msg:'Hello Vue'
        }
    },
    methods:{
        ...mapActions(["addAction","reduceAction"])
    }
}
</script>

module模块组

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

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


Vue.use(Vuex);

const state={
    count:1,
    status:'开始'
}

const mutations={
    //n是可以传递过来的参数
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}

const getters={
    count:state=>state.count+"个"
}

const actions={
    addAction(context){
       context.commit("add",10);
    },
    reduceAction({commit}){
        commit("reduce")
    }
}

const modeA={
    state,
    mutations,
    getters,
    actions 
}


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

在模板使用

<h3>{{$store.state.a.count}}</h3>

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

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.05.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度