(Vue全家桶)Vue-vuex

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;
    }
},

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黒之染开发日记

【easeljs】事件汇总

文章说明:为了方便我自己查找easeljs的所有事件,所以我从easeljs的文档里抄过来加上自己的翻译,会慢慢补全,漏了的,错了的,评论一下我会补上去哦。(不...

13920
来自专栏葡萄城控件技术团队

Silverlight自定义数据绑定控件应该如何处理IEditableObject和IEditableCollectionView对象

最近在一直研究Silverlight下的数据绑定控件,发现有这样两个接口IEditableObject 和IEditableCollectionView,记录一...

19990
来自专栏君赏技术博客

Jekyll-Admin-Mac-列表

接下来我们需要就是做出这个列表数据,我们可以使用 NSTableView来做出这个效果。

16710
来自专栏前端下午茶

Vue源码阅读 - 文件结构与运行机制

vue已是目前国内前端web端三分天下之一,同时也作为本人主要技术栈之一,在日常使用中知其然也好奇着所以然,另外最近的社区涌现了一大票vue源码阅读类的文章,在...

12930
来自专栏云瓣

深入Redux架构

关于redux 之前写了一篇通过一个demo了解Redux,但对于redux的核心方法没有进行深入剖析,在此重新总结学习,完整的代码看这里。(参考了React ...

29560
来自专栏非著名程序员

仿苹果数字键盘以及判断信用卡有效期的Editext

这次带来一个小小的信用卡有效期规则的Editext,额外赠送内置数字键盘的开发 首先来看下需求: 1) 月份数字: λ 数字输入0:后一位数字可输入...

22950
来自专栏web编程技术分享

eclipse常用快捷键

30360
来自专栏landv

实现用VB.Net/(C#)开发K/3 BOS 插件的真正可行方法

16110
来自专栏偏前端工程师的驿站

前端构建:Less入了个门

一、前言                                说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scs...

20170
来自专栏前端达人

2018年最全面的前端面试题都在这里了

意义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 注意: 1.尽可能少的...

5.4K70

扫码关注云+社区

领取腾讯云代金券