vuex基础知识总结

摘要:
需要在项目中添加vuex。根据我的研究,我总结了自己的经验,供你参考。在学习之前,我们应该知道为什么要使用vuex?在什么情况下需要应用vuex?对于整个项目,我称之为“分离、分离和组合”。脚手架的作用是“分离”,它将复杂的页面结构划分为多个组件;vuex的作用是“组合”所有组件之间使用的通用数据和方法。如上图所示,a.vueb.vuec.vue可以调用和修改存储中的变量和方法。

项目中要求添加vuex,根据学习我这个小白总结了一点自己的心得,供大家参考

在学习之前,要知道两件事

为什么要用vuex?vuex要什么场景下应用?

简单点解释一下

1.项目中应用了vue脚手架之后,组件之间一定会涉及到数据之间的传递,父子组件,兄弟组件,但是传统方法会很复杂,不易操作,而vuex相当于将所有需要用到的数据单独拿出,在每一个组件之间都能获取以及更改。对于整个项目来说,我将之成为“分分合合”,脚手架的作用就是“分”,将复杂的页面结构分成一块块的组件;vuex的作用就是“合”,将所有组件之间的用到的公共数据和方法合在一起。

2.如果页面足够简单,就不需要用到vuex。开发大型复杂的单页应用。

vuex基础知识总结第1张

如上图,a.vue b.vue c.vue都能调用和修改store中的变量和方法 。

vuex应用

 了解了vuex的用途,接下来介绍一下vuex如何应用

1.下载vuex

  npm install vuex --save

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

  import Vue from 'vue';
  import Vuex from 'vuex';
Vue.use(Vuex);

3.创建vuex主体

export default new Vuex.Store({
    state: {  //这个就是我们说的访问状态对象,它就是我们SPA(单页应用程序)中的共享值。相当于vue中的data
        count: 1
    },
    mutations: {
        add(state){
            state.count+=1;
        },
        reduce(state){
            state.count-=1;
        }
    },
    getters : {  //在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性
        count:function(state){
            return state.count +=100;
        }
    },
    //actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态。
    //在actions里写了两个方法addAction和reduceAction,在方法体里,我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。
    //context:上下文对象,这里你可以理解称store本身。
    //{commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。
    actions :{
        addAction(context){
            setTimeout(() => {
                context.commit('add',10)
            }, 3000);
            console.log('我比reduce提前执行');
        },
        reduceAction({commit}){
            commit('reduce')
        }
    }
});

4.页面引用

import store from '@/store/store'
import { mapState,mapMutations,mapGetters,mapActions } from 'vuex'
mapState,mapMutations,mapGetters,mapActions对应store.js中的state,mutations,getters,actions,当前组件用到那个就引用哪个

5.组件应用

在组件中获取store.js中的state中的值有三种方法

a.

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

b.

computed:mapState({
    count:state=>state.count  //理解为传入state对象,修改state.count属性
})

c.

computed:mapState(["count"])
 
mutations修改状态
 methods:mapMutations([
            'add','reduce'
]),

组件中调用

<button @click="reduce">-</button>
 
getters基本用法
getters从表面是获得的意思,可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。
     computed:{
        ...mapState(["count"]),
        count(){
            return this.$store.getters.count;
        }
    },

简写为

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

actions异步修改状态

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

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

组件调用

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

免责声明:文章转载自《vuex基础知识总结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇【转】巧用DOS tree命令+批处理 实现 指定文件 批量复制!多个haproxy 之间跳转下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

简单入手 vuex--状态管理

如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习一下vuex是如何修改状态值的: 安装:npminstall vuex --save 引入:import Vuefrom'vue' import V...

vuex存储和本地存储的区别

1、实质的区别 vuex存的是状态,存储在内存,localstorage是浏览器提供的接口,让你存的是文件,以文件的形式存储在本地 2、应用场景 vuex用于组件之间的传值,localstorage则主要用于页面之间的传值 3、永久性 当刷新页面时,vuex存储的值会丢失,localstorage不会 4、总结 个人在使用的时候,觉得用localstora...

uniapp app-plus pages.json

app-plus Object 设置编译到 App 平台的特定样式,配置项参考下方 app-plus App 参考地址 https://uniapp.dcloud.io/collocation/pages app-plus配置编译到 App 平台时的特定样式,部分常用配置 H5 平台也支持。以下仅列出常用,更多配置项参考 WebviewStyles。 ti...

快速重置vuex数据

首发于: https://lonhon.top最近遇到的一个场景,由于项目的权限系统+路由控制中用到了vuex存储全局数据,在登出时需要将所有数据进行重置or清空。 比如 store.state.username初始为'' => 登陆后变成'张三' => 登出后还是'张三',此时需要置为''. 解决方法0.1 actions.resetVuex...

架构使用vuex结合vue-meta实现router动态设置meta标签

可以通过引入vue-meta模块,通过路由守卫监听获取到路由中meta的定义的值,再将获取到的值赋值到vuex中module模块中的state,再将模块中的值通过vue-meta模块中的metaInfo方法修改meta标签 参考:https://www.imooc.com/article/288045 1、安装 npm install vue-meta...

Vuex使用

一、Vuex 概述 1.1 Vue中组件之间共享数据的方式(小范围) 1、父向子传值:v-bind 属性绑定2、子向父传值:v-on 时间绑定3、兄弟组件之间共享数据: EventBus $on 接收数据的那个组件 $emit 发送数据的那个组件 1.2 Vuex概述 Vuex是什么Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件...