精华内容
下载资源
问答
  • vuex使用

    2021-05-20 15:52:42
    vuex使用 目录 vuex使用 1.下载vuex包 2.引入vuex包 3.注册vuex 4.创建vuex实例 5.挂载到Vue中 1.下载vuex包 npm i vuex -s 2.引入vuex包 import Vuex from "vuex" 3.注册vuex Vue.use(Vuex); 4.创建...

    vuex使用

    目录

    vuex使用

    1.下载vuex包

    2.引入vuex包

    3.注册vuex

    4.创建vuex实例

    5.挂载到Vue中


    1.下载vuex包

    npm i vuex -s

    2.引入vuex包

    import Vuex from "vuex"

    3.注册vuex

    Vue.use(Vuex);

    4.创建vuex实例

    const store =  new Vuex.Store({

      state : {} ,  // 储存数据

      mutations : {} ,  //储存方法

      getters:{} ,  //从基本数据(state)派生的数据,相当于state的计算属性

      actions:{}  //处理异步放在这里   触发方式dispatch

    modules : {}  ,  //模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰方便管理。

    })

    5.挂载到Vue中

    var vm = new Vue({

     el: "app",

     store

    })

    注意: 不推荐组件中直接操作vuex中的state , 而是在mutations中操作state , 因为这样在出现问题中能够快速定位操作数据的方法

    调用state   this.$store.state.数据名称

    触发mutations  this.$store.commit("方法名",参数)

    调用getters  this.$store.getters.名称

     

     

    moudle 下面的每个模块要添加namespaced : true,  不然 moudle 下的 getters actions mutations 都是全局注册 会触发两次

    如果加了  conmit("模块名/mutations名")     dispatch("模块名/actions名")   $store.getters["模块名/getters名"]

     

    为了方便获取到moudle模块下面的数据  vuex 提供了一个方便的方法

    { mapState , mapGetters , mapMutations , mapActions } from "vuex";

    ...mapGetters("模块名", ["getters名" , "getters名"])   或者  ...mapGetters("模块名" , {映射名:"getters名"})

    mapMutations 、mapActions 同上

    注意 : mapState 必须用在computed 中  且

    需要修改为映射名 需要这么写  ...mapState("模块名" , {映射名:state => state.模块下的state的属性名})

    笔记.....

     

    展开全文
  • Vuex使用

    2019-09-26 15:43:44
    Vuex使用简介为什么要用vuexVuex 应用场景单向数据流理念Vuex 有五种属性:State、Getter、Mutation、Action、ModuleVuex 核心流程不用Vuex会带来什么问题? 简介 Vuex 是一个专门为Vue.js应用程序开发的状态管理模式...

    简介

    Vuex 是一个专门为Vue.js应用程序开发的状态管理模式;也其实就是一个仓库管理着应用里面所有组件的状态。

    为什么要用vuex

    有的时候项目较大时,组件嵌套过多的时候,多组件共享同一个State会在数据传递时出现很多问题,而vuex就可以解决这些问题;

    Vuex 应用场景

    场景有:
    (1)单页面应用
    (2)组件之间的状态
    (3)音乐播放
    (4)登录状态
    (5)加入购物车

    单向数据流理念

    在这里插入图片描述

    • state:驱动应用的数据源(data数据);
    • view:以声明方式将state映射到视图(初始化数据和更新显示数据);
    • actions:响应在view上的用户输入导致的状态变化(多个事件函数改变数据);

    Vuex 有五种属性:State、Getter、Mutation、Action、Module

    Vuex 核心

    vuex由一下几部分组成:

    • state
      state 管理的状态对象,就是所有组件共享的数据(初始化data);
      原理:集中存储Vue Components 中 data对象的零散数据,全局其唯一,以进行统一的状态管理,页面 显示所需的数据从该对象1中进行读取,利用 Vue 的细粒度数据响应机制来进行高效的状态更新。
    // 创建一个 Counter 组件
    const Counter = {
      template: `<div>{{ count }}</div>`,
      computed: {
        count () {
          return store.state.count
        }
      }
    }
    
    • mutations (mutation 必须是同步函数)
      直接更新 state 的方法(回调函数)的对象;
    const store = new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        increment (state) {
          // 变更状态
          state.count++
        }
      }
    })
    

    注意:不能直接调用一个 mutation hander,这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数”,如果要使用一个 mutation hander,需要以相应的 type 调用 store.commit 方法:
    代码是:store.commit(‘increment’)

    • actions
      1、 事件回调函数的对象,发送ajax请求与后台进行交互;
      2、原理:负责处理 Vue Components接收到的所有交互行为。包含同步和异步操作,支持多个同名方法,按照注册的顺序依次触发。想后台API请求的操作就在这个模块中机芯,包括触发其他 action 以及提交 mutation 的操作。该模块提供了 Promise 的封装,以支持 action 的链式触发。
      3、使用 action来分发(dispatch)事件通知 store 去改变,这样约定的好处是,我们能够记录所有store 中发生的 state 改变,同时实现能做到记录变更(mutation)、保存状态快照、历史回滚、时光旅行的先进的调试工具。

    • Action 类似于 mutation,不同在于以下两个方面:
      (1)Action 提交的是 mutation,而不是直接变更状态;
      (2)Action 可以包含任意的异步操作;

    const store = new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment (state) {
         state.count++
       }
     },
     actions: {
       increment (context) {
         context.commit('increment')
       }
     }
    })
    

    Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此可以调用 context.commit提交一个 mutation,或者通过context.statecontext.getters来获取 state 和 getters;

    • getters
      1、它是一个 计算属性,主要用来过滤一些数据;
      2、原理:state 对象读取方法。它被包含在了 Vue Components 通过该方法读取全局 state 对象。
      3、Getter 的返回值回根据它的依赖被缓存起来,且只有当它的依赖值发生了变化才会被重新计算。
      4、Getter 属性和 computed 计算属性差不多,就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

    用处:
    (1)如果需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数

    computed: {
      doneTodosCount () {
        return this.$store.state.todos.filter(todo => todo.done).length
      }
    }
    

    (2)如果有多个组件需要用到此属性,我们复制这个函数,或者抽取到一个共享函数然后在多处导入它,但是哪种方式都不是很可以,而Getter 解决了这个问题。
    Getter 接受 state 作为第一个参数:

    const store = new Vuex.Store({
      state: {
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
      },
      getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      }
    })
    

    Getter 会暴露为 store.getter 对象,可以用属性的形式来进行访问这些值;

    store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
    
    • mudules
      原理:状态改变操作方法。是 Vuex 修改 state 的唯一推荐方法,其他修改方式在严格模式下将会报错的,该方法只能进行同步操作,且方法名只能全局唯一。操作之中会有一些 hook 暴露出来,以进行 state 的监控等。
      由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变的非常复杂时, store 对象就有可能会变得复杂,而为了解决这个问题,Vuex 允许我们将 store 分割成模块 (module),每个模块拥有自己的 state、mutation、action、getter、将嵌套子模块从上至下进行同样方式的分割;
    const moduleA = {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
    
    const moduleB = {
      state: { ... },
      mutations: { ... },
      actions: { ... }
    }
    
    const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB
      }
    })
    
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态
    
    • Vue Components:Vue组件,在HTML页面上,负责接收用户操作等交互行为,执行dispatch方法触发对应 action 进行回应。
    • store
      在 main.js 配置后会生成一个 $store 属性,它就是 store 对象,其中有属性 state,getters,方法 dispatch(actionName, data):分发调用 action;

    流程

    在这里插入图片描述
    流程:Vue组件接收交互行为,调用 dispatch 方法触发 action 相关处理,如果页面状态需要改变,则调用 commit 方法提交 mutation 修改 state,通过 getters 获取 state 新值,重新渲染 Vue Components,界面会随之更新。

    不用Vuex会带来什么问题?

    1、可维护性会下降,如果想要修改数据,要维护三个地方;
    2、可读性会下降,因为一个组件里的数据,根本看不出来是从哪来的;
    3、增加耦合,大量的上传会派发,会让耦合性大大的增加,本来Vue 用Component就是为了减少耦合,如果不用Vuex的话,就会和组件化的初衷相反;

    请多多指教~!

    展开全文
  • vuex 使用

    2019-10-04 10:33:40
    cnpm install vuex --save   D:\workspace\xxx\src\main.js import Vuex from 'vuex' Vue.use(Vuex) let store = new Vuex({ state: { totalPrice: 0 }, mutations: { in...
    cnpm install vuex --save
    

      

    D:\workspace\xxx\src\main.js

    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    let store = new Vuex({
      state: {
        totalPrice: 0
      },
      mutations: {
        increment (state, price) {
          state.totalPrice += price
        },
        decrement (state, price) {
          state.totalPrice -= price
        }
      }
    })
    

      

    new Vue({
      el: '#app',
      router,
      store,
      template: '<App/>',
      components: { App }
    })
    

      

    使用

    this.$store.state.totalPrice
    

      

     

     

     

     

     

    转载于:https://www.cnblogs.com/tabCtrlShift/p/9163207.html

    展开全文
  • vuex 使用文档小结篇

    2020-10-18 19:52:57
    Vuex 是一个专为Vue.js应用程序开发的状态管理模式,集中式存储管理应用的所有组件状态。本文给大家介绍了vuex使用文档,需要的朋友参考下吧
  • 浅谈super-vuex使用体验

    2020-08-27 07:37:07
    super-vuex是一套用于简化Vuex的数据架构。这篇文章主要介绍了浅谈super-vuex使用体验,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • uni vuex使用

    2019-06-21 15:47:55
    uniapp vuex使用 1、新建store/index.js ··· import Vue from ‘vue’ import Vuex from ‘vuex’ Vue.use(Vuex) const store = new Vuex.Store({ state: { hasLogin: false, userInfo: {}, }, mutations...

    uniapp vuex使用

    1、新建store/index.js

    ···
    import Vue from ‘vue’
    import Vuex from ‘vuex’

    Vue.use(Vuex)
    
    const store = new Vuex.Store({
    	state: {
    		hasLogin: false,
    		userInfo: {},
    	},
    	mutations: {
    		setLogin(state, provider) {
    			state.hasLogin = true;
    			state.userInfo = provider;
    			uni.setStorage({//缓存用户登陆状态
    			    key: 'userInfo',  
    			    data: provider  
    			}) 
    			console.log(state.userInfo);
    		},
    		setLogout(state) {
    			state.hasLogin = false;
    			state.userInfo = {};
    			uni.removeStorage({  
                    key: 'userInfo'  
                })
    		}
    	},
    	actions: {
    	
    	}
    })
    
    export default store
    

    ···

    2、在main.js中添加

    ···
    import store from ‘./store’

    Vue.protory.$store = store;
    

    ···

    3、举例在login.vue中使用

    	<template>
    	<view class="login-form">
    		<view class="login-title">LoginForm</view>
    		<view class="login-box">
    			<form @submit="formSubmit"> 
    				<view class="section">  
    					<input class="l-input" name="userName"  placeholder="please input here" />
    				</view> 
    				<view class="section"> 
    				
    					<input class="l-input" password name="password" placeholder="please input here" />
    				</view> 
    				<view class="btn-area">
    					<button class="l-btn" formType="submit" >登陆</button>
    				</view>
    			</form>
    		</view>
    	</view>
    </template>
    
    <script>
    	import { mapMutations } from 'vuex';
    
    	export default {
    		data() {
    			return {
    				
    			};
    		},
    		methods:{
    			...mapMutations(['setLogin']),
    			
    			formSubmit(e){  
    			 	this.setLogin(e.detail.value);  
    			}
    	 	
    	}
    </script>
    
    <style lang="scss">
    	...
    </style>
    
    展开全文
  • vuex 使用详解

    万次阅读 2017-10-23 18:56:37
    Vuex 使用详解 说明 Vuex 是一个专门为 Vue 应用程序开发的状态管理模式,适合开发大型单页应用, 它能够更好的在组件外部管理状态 重要文件版本 “vue”: “^2.5.2”, “vuex”: “^3.0.0” 特点 ...
  • 主要介绍了Vuex 使用及简单实例(计数器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了Vue-CLI与Vuex使用方法,结合实例形式分析了Vue-CLI创建项目与Vuex相关概念、使用方法及操作注意事项,需要的朋友可以参考下
  • uniapp的Vuex使用

    2020-04-03 16:22:17
    uniapp的Vuex使用 一、在项目的根目录下新建一个store文件夹,然后在文件夹下新建一个index.js文件 二、在新建的index.js下引入vue和vuex,具体如下: //引入vue和vuex import Vue from 'vue' import Vuex from '...
  • 主要介绍了Vuex 使用 v-model 配合 state的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vueX使用方法初步整理

    2021-03-31 14:30:46
    vueX使用方法初步整理 vuex存储在内存,读取内存比读取硬盘速度要快 vuex是专为Vue.js开发的状态管理模式。 vuex用于组件之前的传值 vuex是响应式的,vuex值发生改变对应的组件也会相应的更新 刷新页面vuex存储的值...
  • vuex使用讲解

    2019-08-12 02:30:00
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
  • vuex 使用步骤代码

    2020-09-08 13:27:03
    完整的描述了Vuex的用法,提供Vuex源文件代码,详细步骤可查看博客https://blog.csdn.net/weixin_44640323/article/details/108436794
  • Vuex使用 1 加简单案例

    2018-10-17 11:29:28
    Vuex使用 1 1、安装 vuex。在控制命令行中输入下边的命令就可以了。 npm n install vuex --save 2、新建store.js文件(可以新建一个文件夹放),文件中引入我们使用的vue和vuex。 import Vue from 'vue'; ...
  • 今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 掌握vuex使用

    2021-08-21 18:55:04
    如果您不打算开发大型单页应用,使用Vuex 可能是繁琐冗余的。如果您的应用够简单,最好不要使用Vuex使用Vuex管理数据优势: 能够在vuex中集中管理共享的数据,便于开发和后期进行维护 能够高效的实现...
  • Vue【vuex使用步骤】

    2020-04-22 16:50:31
    vuex使用总结 安装方法 npm install vuex --save / yarn add vuex --save 然后在项目的src文件夹下创建一个store文件夹 然后在文件夹下创建index.js文件 在js文件中引入vue和vuex import Vue from 'vue' import ...
  • Vuex使用心得

    千次阅读 2018-12-17 16:36:41
    在vue中处理多组件通信的时候一般都会用vuex ...在store的state下定义一个id,然后在组件内,使用computed来获取这个id 有时候我们需要在页面修改store中的值,这个时候就要为computed设置set方法了,compute...
  • vuex使用流程

    千次阅读 2019-04-19 15:24:41
    使用流程 1.安装vuex npm install vuex --save; 2.store文件中引入vuex 为了方便全局使用,一般会新建一个store文件夹,用于存放相关状态值。文件夹下的index.js作为对外输入接口的主文件。在主文件中引入vuex,并...
  • Vuex 使用笔记

    2019-04-03 20:57:56
    使用Vuex之前需要使用Vue声明组件 Vue.use(Vuex) let store = new Vuex.store({ state,// Vuex中保存数据 mutations, // 对Vuex中的state中的数据进行操作 actions, //使用 commit() 对mutations操作 ...
  • vuex使用步骤

    2020-10-16 19:26:28
    第一步:npm i vuex --save 第二步: 创建store.js import vuex from 'vuex' import vue from 'vue' 第三步:Vue.use(vuex) 第四步:const store = new Vuex.Store({......// 使用安装 Vue.use(Vuex) // 初始化 cons.
  • vuex使用getters传参返回值时, vuex 的 getter 接受 state 作为参数,此外还接受 getters 作为第二个参数,可以用getters.xxx 来传递其他 getters 中的数据。
  • vuex 使用教程

    2020-02-10 21:14:52
    vuex 介绍:官网解释,Vuex 是一个专为 Vue.js 应用程序开发的状态管理...在 vue 项目中使用vuex,步骤如下 1、项目安装 vuex npm install vuex --save 或 cnpm install vuex --save 2、创建一个 store ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,916
精华内容 23,566
关键字:

vuex使用

vue 订阅