精华内容
下载资源
问答
  • 使用vue模拟VueX

    2021-02-27 12:15:08
    let Vue; class Store{ constructor(options) { //将state进行响应式处理 //访问 使用 this.$store.state.xxxx this._vm = new Vue({ data:{ $$state:options.state, }, }); this._mutations ...

    学习笔记(只是为了自己的记忆深刻,没有任何目的)
    原生片段

    import Vue from 'vue'
    import Vuex from './vuex.js'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
    	state: {},
    	mutations: {},
    	actions: {},
    	modules: {}
    })
    

    使用vue的双向绑定机制实现简单的vuex

    1. 模拟$store.commit()
    2. 模拟$store.dispatch()
    3. 模拟$store.state.xxx
    4. 模拟getters
    //1.挂载$store
    //2.实现store
    
    let Vue;
    
    class Store{
    	constructor(options) {
    		//将state进行响应式处理
    		//访问 使用 this.$store.state.xxxx
    	    this._vm = new Vue({
    			data:{
    				$$state:options.state,
    			},
    		});
    		this._mutations = options.mutations;
    		this._actions = options.actions;
    		
    		//将this挂载到函数实列上
    		this.commit = this.commit.bind(this);
    		this.dispatch = this.dispatch.bind(this);
    		
    		//模拟getter 计算state的计算属性
    		this.getters = {};
    		
    		//模拟getters
    		options.getters && this.handleGetters(options.getters );
    	}
    	
    	/**
    	 * Object.keys 拿到getters中所有对象的key (也就是函数名)遍历 
    	 * 然后通过Object.defineProperty 进行数据劫持 将函数放到this.getters中 键值就是key
    	 * 当用户进行访问的时候 通过get 去调用 getters[key]()//调用getters中的函数 并且将this.state传递进去
    	*/
    	handleGetters(getters){
    		Object.keys(getters).map((key)=>{
    			Object.defineProperty(this.getters,key,{
    				get:()=>{getters[key](this.state)},
    			})
    		})
    	}
    	
    	get state(){
    		return this._vm._data.$$state;
    		
    	}
    	set state(v){
    		console.error("state无法set");
    	}
    	
    	//模拟mutations
    	commit(type,payload){
    		const entry = this._mutations[type];
    	    if(!entry){
    			console.error("方法不存在");
    		}
    		entry(this.state,payload);
    	}
    	
    	//模拟actions
    	dispatch(type,payload){
    		const entry = this._actions[type];
    		
    		if(!entry){
    			console.error("方法不存在");
    		}
    		
    		entry(this,payload);
    	}
    	
    	
    }
    
    //通过Vue中的混入mixin机制将vuex挂载到Vue中的实列中
    const install =(_Vue)=>{
    	Vue = _Vue;
    	Vue.mixin({
    		beforeCreate() {
    			if(this.$options.store){
    				Vue.prototype.$store = this.$options.store;
    			}
    		}
    	})
    }
    
    export default {Store,install};
    
    展开全文
  • 很早我们的新闻详情页是在news-detail.vue 组件里,获取服务器数据,然后把数据保持到组件的data 里,既然我们已经用到了vuex,学习了它的state,我们就应该想到把返回的数据交给state 来存储。 1.首先在Vuex.Store ...
  • vue+vuex:vuex负责数据交互,vue渲染页面 iviewui:ui组件,方便布局 搭建开发环境 1.基本环境 Vue起步(无cli) 安装: npm install –save Mockjs 使用: 详细API:mockjs.com mock.js var Mock = require('m
  • 很好demo,使用的时候尽可能的按照步骤一步步去实现,很好demo,使用的时候尽可能的按照步骤一步步去实现
  • vite2 + vue3 + vuex + vue-router +打字稿+ ant-design-vue +模拟 推荐的IDE设置 + 。确保在设置中启用vetur.experimental.templateInterpolationService ! 如果使用[removed] 是当前处于RFC阶段的功能。要获得...
  • vuex(状态管理) axios(数据请求) mock.js(模拟后台数据) vue-touch(手势判断) fastclick(解决移动端浏览器 300 毫秒点击延迟问题) vue-lazyload(图片懒加载) swiper(轮播) 设计布局: 将页面的固定布局 ...
  • vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这...
  • vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这...
  • Vue使用Vuex一步步封装并使用store

    千次阅读 2020-05-12 23:38:48
    文章目录一、安装Vuex依赖二、一步步封装store1. main.js中全局引入store仓库(下一步创建)2. this.$store3. this.$store.state4. this.\$store.getters(this.\$store.state的升级)5. this.$store.commit('...

    精简版

    一、安装Vuex依赖

    cnpm install vuex --save
    

    二、一步步封装store

    1. main.js中全局引入store仓库(下一步创建)

    import store from './store' //引入store
     
    new Vue({
      el: '#app',
      router,
      store, //挂载store,this将自动生成$store属性
      template: '<App/>',
      components: { App }
    })
    

    挂载store,this将自动生成$store属性

    2. this.$store

    创建store仓库:习惯在src下创建store文件夹,再创建index.js,内容:

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    const store = new Vuex.Store();
     
    export default store;
    

    此时你已经有了一个空的store全局仓库,没有任何功能,但可以在任何vue实例下使用 this.$store 去访问它。

    • store使用范围均是可以全局使用;
    • let a=1; {a:a}.a 的缩写是 {a}.a,即当字典的键和值命名一样时,可以省略只写a
    • state、getters、mutations、mutations均是Vuex封装好的特殊变量,以下声明的功能变量均是这些名字,一个好处是store挂载该功能时可以简写(如3-1,本例均如此)。当然你也可直接在store中写功能(如3-2)。

    3. this.$store.state

    给store仓库读取数据功能:state

    /*********  3-1 **********/
    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
     const state={ //要设置的全局访问的state对象,赋予初始属性值
         themeColor: {val:'blue',opacity:false},
         changeThemeCount:0,
         cache:''
       }; 
     const store = new Vuex.Store({
           state
        });
     
    export default store;
    

    此时你的store仓库已经有了存取数据的功能,可以用 this.$store.state.themeColor 等数据了。
    下面是第二种写法

    /*********  3-2 **********/
    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
          state:{
           	 //要设置的全局访问的state对象,赋予初始属性值
    	     themeColor: {val:'blue',opacity:false},
    	     changeThemeCount:0,
    	     cache:''
           }
        });
     
    export default store;
    

    4. this.$store.getters(this. $store.state的升级)

    给state功能升级,让他拥有计算能力(类似vue中的computed方法):getters:

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
     const state={ //要设置的全局访问的state对象,赋予初始属性值
         themeColor: {val:'blue',opacity:false},
         changeThemeCount:0,
         cache:''
       }; 
    const getters = {   //实时监听state值的变化(最新状态)
        getThemeColor(state) {  //定义函数,返回处理过的val,命名最好有代表性
           let hour = new Date().getHours();
           // 如果白天则主题色不透明,反之
           state.themeColor.opacity = 8 <= hour && hour <= 20;
           return state.themeColor
        }
    };
    const store = new Vuex.Store({
           state, // 挂载存取数据功能
           getters //挂载数据计算功能
    });
    export default store;
    

    此时使用 this.$store.getters.getThemeColor 获取颜色,将自动根据时间的不同自动设置主题是否有透明的效果

    5. this.$store.commit(‘mutations’)

    给store仓库使用函数功能(只为操作state数据):mutations - 同步

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
     const state={ //要设置的全局访问的state对象,赋予初始属性值
         themeColor: {val:'blue',opacity:false},
         changeThemeCount:0,
         cache:''
       }; 
    const getters = {   //实时监听state值的变化(最新状态)
        getThemeColor(state) {  //定义函数,返回处理过的val,命名最好有代表性
           let hour = new Date().getHours();
           // 如果白天则主题色不透明,反之
           state.themeColor.opacity = 8 <= hour && hour <= 20;
           return state.themeColor
        }
    };
    const mutations = {
        //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        clearCatch(state) { 
            state.cache = "";
            state.changeThemeCount= 0;
        },
        setThemeColor(state,color,opacity){ 
           state.themeColor.val = color;
           state.themeColor.opacity = opacity;
           state.changeThemeCount++;
        }
    };
    const store = new Vuex.Store({
            state, // 挂载存取数据功能
           getters, //挂载数据计算功能
           mutations // 挂载函数功能
    });
    export default store;
    

    此时可以使用 this.$store.commit(‘setThemeColor’,‘grey’,‘1’) 了(注意第一个参数是函数名,不是传参给state的,state自己会传,后两个才是对应传参)。可以主动设置主题色和透明度,操作是同步的,即如果你在同一个组件连续调用多次setThemeColor函数,获取仓库中state.changeThemeCount的值是一样的,下面介绍异步函数。

    6. this.$store.dispatch(‘actions’)(this. $store.commit(‘mutations’)的升级)

    给store仓库的函数commit功能升级(只为异步操作mutations中的函数):actions - 异步

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
     const state={ //要设置的全局访问的state对象,赋予初始属性值
         themeColor: {val:'blue',opacity:false},
         changeThemeCount:0,
         cache:''
       }; 
    const getters = {   //实时监听state值的变化(最新状态)
        getThemeColor(state) {  //定义函数,返回处理过的val,命名最好有代表性
           let hour = new Date().getHours();
           // 如果白天则主题色不透明,反之
           state.themeColor.opacity = 8 <= hour && hour <= 20;
           return state.themeColor
        }
    };
    const mutations = {
        //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        clearCatch(state) { 
            state.cache = "";
            state.changeThemeCount= 0;
        },
        setThemeColor(state,color,opacity){ 
           state.themeColor.val = color;
           state.themeColor.opacity = opacity;
           state.changeThemeCount++;
        }
    };
    const actions = {
        //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性
        setThemeColorAction(context,color,opacity){
         	context.commit('setThemeColor',color,opacity);
        }
    };
    const store = new Vuex.Store({
           state, // 挂载存取数据功能
           getters, //挂载数据计算功能
           mutations, // 挂载函数功能
           actions, // 挂载异步函数
    });
    export default store;
    

    此时可以使用 this.$store.dispatch(‘setThemeColorAction’,‘grey’,‘1’) 了(注意第一个参数是函数名,不是传参给context的,context自己会传,后两个才是对应传参)。可以主动设置主题色和透明度,操作是异步的,即如果你在同一个组件连续调用多次setThemeColorAction函数,获取仓库中state.changeThemeCount的值就不是一样的。

    7.strict严格模式

    export default new Vuex.Store({
      strict: true,
      state: {
        ...
      },
      ...
    }
    

    此模式下所有的状态变更(即更新state)必须使用mutation(commit),如果在组件中直接修改state则会报错。这样的好处是所有的state的更新都体现在仓库中,整改方便;使用devTools调试工具时可以跟踪到状态的修改。

    三、modules 模块化

    第二个模块介绍了store仓库的四个功能:state、getters、mutations和actions,下面介绍第五个功能:modules。

    • 当项目比较大时,一个store中数据会非常多而复杂,不易管理。此时便可建多个“子仓库”,分别对应不同模块做数据的读取和操作。
    • 注意主仓库还是那一个,只要把他的“子仓库”放在主仓库的modules下即可。
    • 子仓库看着很像仓库,其实它并不是store的实例,不是仓库(new Vuex.Store()实例化后的对象才是仓库),只是一个普通js对象(字典)。

    1、在store下新建modules文件夹,在modules下新建home.js“子仓库”。
    在这里插入图片描述
    即home.js只管主页下的数据(一般不要分的太细,最多一个页面一个仓库管简洁),下面是home.js代码

    //home.js
    
    const state={
        users:[] //存访问该页面的所有用户
    };
    const getters={
      getUsers(state){ //获取访问该页面的所有用户
        // 对数据清理-除去脏数据
      	if (state.users.includes('*')) delete state.users['*'] 
        	return state.users;
      }
    };
    const mutations={
         addUser(state,name){ //增加访问用户
            state.collects.push(name)
         }
     };
    const actions={
        invokeAddUser(context,name){ //触发mutations里面的addUser,传入数据形参name对应到users
            context.commit('addUser',name);
        }
    };
    // 注意和仓库的区别
    const store = {
         // namespaced用于在全局引用此文件里的方法时标识这一个的文件名,使得让人明白这些数据来自哪个仓库
         // 即当你需要在别的文件里面使用子仓库(mapStates、mapGetters、mapActions)时,里面的方法需要注明来自哪一个模块的方法
         namespaced:true,
         state,
         getters,
         mutations,
         actions
    }
    export default store;
    

    2.“子仓库”创建完成,要让主仓库引用它:

    import Vue from 'vue';
    import Vuex from 'vuex';
    import home from './modules/home.js'
    
    Vue.use(Vuex);
     const state={ //要设置的全局访问的state对象,赋予初始属性值
         themeColor: {val:'blue',opacity:false},
         changeThemeCount:0,
         cache:''
       }; 
    const getters = {   //实时监听state值的变化(最新状态)
        getThemeColor(state) {  //定义函数,返回处理过的val,命名最好有代表性
           let hour = new Date().getHours();
           // 如果白天则主题色不透明,反之
           state.themeColor.opacity = 8 <= hour && hour <= 20;
           return state.themeColor
        }
    };
    const mutations = {
        //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
        clearCatch(state) { 
            state.cache = "";
            state.changeThemeCount= 0;
        },
        setThemeColor(state,color,opacity){ 
           state.themeColor.val = color;
           state.themeColor.opacity = opacity;
           state.changeThemeCount++;
        }
    };
    const actions = {
        //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性
        setThemeColorAction(context,color,opacity){
         	context.commit('setThemeColor',color,opacity);
        }
    };
    const store = new Vuex.Store({
           state, // 挂载存取数据功能
           getters, //挂载数据计算功能
           mutations, // 挂载函数功能
           actions, // 挂载异步函数
           modules:{ // 挂载子仓库
             home
        	}
    });
    export default store;
    

    此时便有了第一个“子仓库”了!

    四、使用仓库

    1、无map系列

    适合使用场景较少:
    建好仓库,组件中直接使用state、getters、mutations、actions:

    • this.$store.state.*
    • this.$store.getters.*
    • this.$store.commit.*
    • this.$store.dispatch.*

    2、map映射系列

    适合使用场景频繁:
    1、使用mapGetters、mapActions 和 mapStates之前需要import导入:

    import {mapState,mapGetters,mapActions} from 'vuex';
    

    2、使用ES6新语法-超引用,将某个功能下的数据或方法全部映射出来以供使用,下面是mapState、mapGetters、mapActions的例子:

    	//这里的...是超引用,映射内容,可以写在computed下、methods下等(一般放在开头)
    	// 直接从库中取值 - 将库里的users值返回给字典中的users并映射给this组件
     	...mapState({  
             users:state=>state.home.users  
          }),
         // 使用计算属性 - 将库里的users计算后的值返回给字典中的users并映射给this组件
        ...mapGetters('home',{ 
             users:'getUsers' //获取清理后的数据
             //由于home仓库 namespaced:true,所以第一个参数作为标识
             // 不使用标识访问的是主仓库
          })
          // 使用异步函数 - 以数组中的函数名,从库中对应的函数映射给this组件以供使用
        ...mapActions('home',['invokeAddUser'])
        // 有某个组件 <span @click='invokeAddUser(name)'></span>
        // 或者直接使用 this.invokeAddUser(name)
    

    3、扩展

    1、mapState映射的三种写法
      computed: mapState({
       // 箭头函数可使代码更简练
        count: state => state.count,
    
        // 传字符串参数 'count' 等同于 `state => state.count`
        countAlias: 'count',
    
        // 为了能够使用 `this` 获取局部状态,必须使用常规函数
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
      
    2、当映射的计算属性的名称与state的子节点名称相同时,
       我们也可以给 mapState传一个字符串数组。
      computed: mapState([ // 数组
       "count"
      ])
      
    3、仓库中action的第二种接收参数
    const actions = {
        //自定义触发mutations里函数的方法,{commit}与store 实例具有相同方法和属性
        setThemeColorAction({commit},color,opacity){
         	commit('setThemeColor',color,opacity);
        }
    };
    

    3、总结

    1、Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 Flux 和 Redux 的设计思想,但简化了概念,并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。

    2、Vuex 的四个核心概念分别是:
    The state tree:Vuex 使用单一状态树,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源(SSOT)』而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
    Getters: 用来从 store 获取 Vue 组件数据。
    Mutators: 事件处理器用来驱动状态的变化。
    Actions: 可以给组件使用的函数,以此用来驱动事件处理器 mutations

    3、Vuex 应用中数据的流向(Vuex 官方图)
    在这里插入图片描述

    • 数据流都是单向的
    • 组件能够调用 action
    • action 用来派发 Mutation
    • 只有 mutation 可以改变状态
    • store 是响应式的,无论 state 什么时候更新,组件都将同步更新

    参考文献:
    思否-飞跃
    思否-离尘不理人

    展开全文
  • 即,模拟后端接口。 当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点。 包括: koa2的知识点 node的知识点 跨域问题 fetch的使用 axios的使用 promise的涉及 vuex -> state、...
  • Vue文件存储 开发一个网盘项目(文件存储应用),该仓库为前端显示页面,所有数据由mockjs虚拟生成。 如何使用 :控制台工具,然后: 下载项目git clone git@github.com:yuhang-dong/vue-filestore.git 进入项目...
  • Vue 不支持IE8及以下版本 因为IE8以下无法模拟ES5特性 VUEX 固化 https://github.com/robinvdvleuten/vuex-persistedstate 参考文档:https://www.jianshu.com/p/c22861ec5f21 数组对象更新检测 改变数据 {{index}}-...

    Vue 不支持IE8及以下版本 因为IE8以下无法模拟ES5特性

    VUEX 固化

    https://github.com/robinvdvleuten/vuex-persistedstate
    参考文档:https://www.jianshu.com/p/c22861ec5f21

    数组对象更新检测

      <div id="app">
        <button @click="change">改变数据</button>
          <ul>
            <li v-for="(item,index) in color">{{index}}---{{item}}</li>
            <li v-for="(item,key) in person">{{key}}---{{item}}--</li>
            <li v-for="item in list">
                <p>Id: {{item.id}}; price: {{item.price}}</p>
            </li>
          </ul>
      </div>
    
     <script src="js/vue.js"></script>
      <script>
        let vm = new Vue({
          el: '#app',
          data: {
            color: ['red','green','white'],
            person: {
              name: 'Alice',
              age: 200,
              skin: 'black'
            },
            list: [
              {
                id: 1,
                price: 200
              },
              {
                id: 4,
                price: 100
              },
              {
                id: 78,
                price: 20
              }
            ]
          },
          methods: {
            // =====================================数组更新检测
              change(){
                //不能触发视图更新
                // this.color[3] = "brown";
                // this.color[1] = 'black';
    
                //能触发视图更新 
                // this.color.push('brown')
                // this.color.splice(1,1)
                Vue.set(this.color,1,'black')
                this.$set(this.color,1,'black')
              }
    
            // =====================================对象更新检测
            // change(){
            //   // 在data中注册过的对象的属性发生改变,会触发视图更新
            //   // this.person["age"] = 100
    
            //   // 没有在data中注册过的对象的属性发生改变,不会触发视图更新
            //   this.person["height"] = 180
    
            //   // 解决方案
            //   // Vue.set(this.person,"height",180)
            //   // this.$set(this.person,"height",180)
            // }
          }
        })
      </script>
    
    

    Key值的使用

    通过给每项元素设置key值可以解决 ‘渲染中的就地复用问题’
    在这里插入图片描述

    事件绑定

    想要查看 事件对象 必须要在绑定事件时 写 $event
    在这里插入图片描述

    VUE与React,Augular区别

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 一、概述1.1vuex有什么用Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似react的redux)1.2什么情况下使用vuex虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益...

    一、概述

    1.1vuex有什么用

    Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似react的redux)

    1.2什么情况下使用vuex

    虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

    如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

    1.3Vuex状态管理

    view ->(dispatch) Action ->(Commit) Mutations ->(Mutate) State -> View

    注意:Action不是必需品,如果有异步操作才可能用到Action,否则可以不使用

    1.4Actions:

    Action 提交的是 mutation,而不是直接变更状态。

    Action 可以包含任意异步操作。

    二、安装及使用

    安装方法1,npm

    cnpm install vuex --save

    npm install vuex --save

    安装方法2,cdn

    其它略过,见文档。

    【使用】

    在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex:

    import Vue from 'vue'

    import Vuex from 'vuex'

    Vue.use(Vuex)

    当使用全局 script 标签引用 Vuex 时,不需要以上安装过程。

    2.1 vuex定义共享数据和引用 state:{}

    应用场景: 例如在购物车中,你在商品详情页进行加减库存操作,而到购物车详情中时,用之前学得的data(){}内数据用法,你是得不到商品详情里的商品数量这个数据的,此时就引入了state:{}做为所有页面的共享数据,加减商品都可使用此处的数据,从而实现数据的共享。

    代码实例

    (多余代码为父子组件互传值复习)

    第1步,引入vuex并创建store实例 src/main.js

    [1]引入vuex

    [2]使用vuex

    [3]创建一个store实例(主要)

    [4]所有组件共用数据存放处

    [5]注入store(重要)

    import Vue from 'vue'

    import App from './App.vue'

    import Vuex from 'vuex' //[1]引入vuex

    Vue.use(Vuex)//[2]使用vuex

    //[3]创建一个store实例

    const store=new Vuex.Store({

    state:{//[4]所有组件共用数据存放处

    count:10

    }

    })

    new Vue({

    el: '#app',

    store,//[5]注入store

    render: h => h(App)

    })

    第2步,引用1步所创建的共享数据count(src/components/home.vue)

    【1】获取store里的共享数据方法1直接调用(this.$store.state.count)

    {{msg2}}

    home:获取vuex的store共用数据:{{this.$store.state.count}}

    import Hello from './hello.vue';

    export default{

    name:'home',

    data(){

    return{

    msg:'Home向Hello传的消息',

    msg2:''

    }

    },

    components:{Hello},

    methods:{

    getmsg(data){

    this.msg2=data;

    }

    }

    }

    第2.2步,其它组件都可以引用共享数据

    src/components/hello.vue

    【1】写一个函数获取vuex并返回store共享数据

    【2】获取vuex的store共享数据方法2(在computed内写一个获取函数,再调用)

    hello子组件:{{getCount}}----{{title}}

    给父组件传消息

    export default{

    name:'hello',

    data(){

    return{

    msg:'Hello子组件向父组件传数据'

    }

    },

    props:{

    title:{

    type:String,

    default:''

    }

    },

    computed:{

    //【1】写一个函数获取vuex并返回store共享数据

    getCount(){

    return this.$store.state.count

    }

    },

    methods:{

    sendMsg(){

    this.$emit('msg',this.msg)

    }

    }

    }

    效果:成功获取到在mian.js内定义的count数据值

    10

    2.2 修改共享数据实例 mutaitions:{}

    第1步,定义修改共享数据的函数 main.js

    [6]更改state里的数据在mutations里写函数操作

    [6.1.0]自加函数,用于其它组件操作数据通过 this.\(store.commit('increment')

    [6.1.1]自减函数,用于其它组件操作数据通过 this.\)store.commit('decrement')

    import Vue from 'vue'

    import App from './App.vue'

    import Vuex from 'vuex' //[1]引入vuex

    Vue.use(Vuex)//[2]使用vuex

    //[3]创建一个store实例

    const store=new Vuex.Store({

    state:{//[4]所有组件共用数据存放处

    count:10

    },//[6]更改state里的数据在mutations里写函数操作

    mutations: {

    increment (state) {//[6.1.0]自加函数,用于其它组件操作数据通过 this.$store.commit('increment')

    state.count++

    },

    decrement(state){//[6.1.1]自减函数,用于其它组件操作数据通过 this.$store.commit('decrement')

    state.count--

    }

    }

    })

    new Vue({

    el: '#app',

    store,//[5]注入store

    render: h => h(App)

    })

    第2步,在组件中使用1步定义的修改共享数据函数 home.vue

    【1】使用mutations里定义好的函数进行共享数据自加操作

    【1.1】使用mutations里定义好的函数进行共享数据自减操作

    【2】修改共享数据自加

    【2.1】修改共享数据自减

    {{msg2}}

    home:获取vuex的store共用数据:{{this.$store.state.count}}

    加store.state里数据

    import Hello from './hello.vue';

    export default{

    name:'home',

    data(){

    return{

    msg:'Home向Hello传的消息',

    msg2:''

    }

    },

    components:{Hello},

    methods:{

    add(){//【1】使用mutations里定义好的函数进行共享数据自加操作

    this.$store.commit('increment')

    },

    sub(){//【1.1】使用mutations里定义好的函数进行共享数据自减操作

    this.$store.commit('decrement')

    },

    getmsg(data){

    this.msg2=data;

    }

    }

    }

    hello.vue 不重要

    hello子组件:{{getCount}}----{{title}}

    给父组件传消息

    export default{

    name:'hello',

    data(){

    return{

    msg:'Hello子组件向父组件传数据'

    }

    },

    props:{

    title:{

    type:String,

    default:''

    }

    },

    computed:{

    //写一个函数获取vuex并返回store共享数据

    getCount(){

    return this.$store.state.count

    }

    },

    methods:{

    sendMsg(){

    this.$emit('msg',this.msg)

    }

    }

    }

    效果:点加按钮会进行共享数据自加操作,减则自减

    注意:数据变更后,所有地方数据都会自动进行变更

    2.3 actions的使用

    Actions:

    Action 提交的是 mutation,而不是直接变更状态。

    Action 可以包含任意异步操作。

    mutaitions内只能执行同步操作。

    src/main.js 定义actions:{}内函数

    【1】用动作操作mutations里函数

    import Vue from 'vue'

    import App from './App.vue'

    import Vuex from 'vuex' //[1]引入vuex

    Vue.use(Vuex)//[2]使用vuex

    //[3]创建一个store实例

    const store=new Vuex.Store({

    state:{//[4]所有组件共用数据存放处

    count:10

    },//[6]更改state里的数据在mutations里写函数操作

    mutations: {

    increment (state) {//[6.1.0]自加函数,用于其它组件操作数据通过 this.$store.commit('increment')

    state.count++

    },

    decrement(state){//[6.1.1]自减函数,用于其它组件操作数据通过 this.$store.commit('decrement')

    state.count--

    }

    },

    actions:{//【1】用动作操作mutations里函数

    increment(context){//context承上启下

    context.commit('increment');

    },

    decrement(context){

    context.commit('decrement');

    }

    }

    })

    new Vue({

    el: '#app',

    store,//[5]注入store

    render: h => h(App)

    })

    src/components/home.vue 调用actions内的函数

    【1】使用main.js里actions里定义好的函数进行共享数据自加操作

    【1.1】使用main.js里action里定义好的函数进行共享数据自减操作

    this.$store.dispatch('decrement')

    {{msg2}}

    home:获取vuex的store共用数据:{{this.$store.state.count}}

    加store.state里数据

    import Hello from './hello.vue';

    export default{

    name:'home',

    data(){

    return{

    msg:'Home向Hello传的消息',

    msg2:''

    }

    },

    components:{Hello},

    methods:{

    add(){//【1】使用main.js里actions里定义好的函数进行共享数据自加操作

    // this.$store.commit('increment')

    this.$store.dispatch('increment')

    },

    sub(){//【1.1】使用main.js里action里定义好的函数进行共享数据自减操作

    // this.$store.commit('decrement')

    this.$store.dispatch('decrement')

    },

    getmsg(data){

    this.msg2=data;

    }

    }

    }

    效果:同上,操作共享数据,1加,2减

    2.3.1 actions内执行异步操作

    src/main.js actions:{}内进行异步模拟

    【异步】异步操作模拟,利用setTimeout函数延迟1秒执行自加操作

    import Vue from 'vue'

    import App from './App.vue'

    import Vuex from 'vuex' //[1]引入vuex

    Vue.use(Vuex)//[2]使用vuex

    //[3]创建一个store实例

    const store=new Vuex.Store({

    state:{//[4]所有组件共用数据存放处

    count:10

    },//[6]更改state里的数据在mutations里写函数操作

    mutations: {

    increment (state) {//[6.1.0]自加函数,用于其它组件操作数据通过 this.$store.commit('increment')

    state.count++

    },

    decrement(state){//[6.1.1]自减函数,用于其它组件操作数据通过 this.$store.commit('decrement')

    state.count--

    }

    },

    actions:{

    increment(context){

    // context.commit('increment');

    setTimeout(function(){ //【异步】异步操作模拟,利用setTimeout函数延迟1秒执行自加操作

    context.commit('increment');

    },1000)

    },

    decrement(context){

    context.commit('decrement');

    }

    }

    })

    new Vue({

    el: '#app',

    store,//[5]注入store

    render: h => h(App)

    })

    src/components/home.vue

    代码同上例,略过

    效果同上例略过

    2.4 getter:{}的使用

    应用场景:例如在购物车中,利用2.3例的自减减少库存,当减少到0时还可以继续减为负数,此时商家将要向用户倒找钱,这样显然不合理。因此引入getter函数;

    src/main.js 写 getters用于控制共享数据

    【getter】用于控制共享数据的使用

    如果count数据大于0则返回count,否则只返回0(小于0时只返回0)

    import Vue from 'vue'

    import App from './App.vue'

    import Vuex from 'vuex' //[1]引入vuex

    Vue.use(Vuex)//[2]使用vuex

    //[3]创建一个store实例

    const store=new Vuex.Store({

    state:{//[4]所有组件共用数据存放处

    count:10

    },

    getters:{//【getter】用于控制共享数据的使用

    controlState(state){ //如果count数据大于0则返回count,否则只返回0(小于0时只返回0)

    return state.count > 0 ? state.count : 0

    }

    },

    //[6]更改state里的数据在mutations里写函数操作

    mutations: {

    increment (state) {//[6.1.0]自加函数,用于其它组件操作数据通过 this.$store.commit('increment')

    state.count++

    },

    decrement(state){//[6.1.1]自减函数,用于其它组件操作数据通过 this.$store.commit('decrement')

    state.count--

    }

    },

    actions:{

    increment(context){

    // context.commit('increment');

    setTimeout(function(){ //异步操作模拟,利用setTimeout函数延迟1秒执行自加操作

    context.commit('increment');

    },1000)

    },

    decrement(context){

    context.commit('decrement');

    }

    }

    })

    new Vue({

    el: '#app',

    store,//[5]注入store

    render: h => h(App)

    })

    src/components/home.vue

    【getters-1】通过computed写函数来获取store里的共享数据方法

    【getters-2】通过computed写函数来显示store里的共享数据

    {{msg2}}

    home:获取vuex的store共用数据:{{getState}}

    加store.state里数据

    import Hello from './hello.vue';

    export default{

    name:'home',

    data(){

    return{

    msg:'Home向Hello传的消息',

    msg2:''

    }

    },

    components:{Hello},

    computed:{//【getters-1】通过computed写函数来获取store里的共享数据方法

    getState(){

    return this.$store.getters.controlState;

    }

    },

    methods:{

    add(){//使用mutations里定义好的函数进行共享数据自加操作

    // this.$store.commit('increment')

    this.$store.dispatch('increment')

    },

    sub(){//使用mutations里定义好的函数进行共享数据自减操作

    // this.$store.commit('decrement')

    this.$store.dispatch('decrement')

    },

    getmsg(data){

    this.msg2=data;

    }

    }

    }

    效果:加了用getter获取数据2处最多只能减到0,没加的,3还是会返回负数

    2.5 moudel模块操作

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,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 的状态

    2.6 store提取为单独文件

    也可参考 router

    具体步骤:

    新建一个src/store文件夹

    在建立一个文件/src/store/index.js

    把store提取到2步建好的文件

    在main.js里引入store文件

    /src/store/index.js

    【1】注意导出:创建一个store仓库

    import Vue from "vue"

    import Vuex from 'vuex'

    Vue.use(Vuex)

    // 【1】注意导出:创建一个store仓库

    export default new Vuex.Store({

    state: {

    count: 10

    },

    mutations: {

    increment(state) {

    state.count++;

    },

    decrement(state) {

    state.count--;

    }

    },

    actions: {

    // context:承上启下

    increment(context) {

    setTimeout(function() {

    context.commit("increment");

    })

    },

    decrement(context) {

    setTimeout(function() {

    context.commit("decrement");

    })

    }

    },

    getters: {

    controlState(state) {

    return state.count > 0 ? state.count : 0

    }

    }

    });

    main.js

    【1】全局引入store文件

    import Vue from 'vue'

    import App from './App.vue'

    import store from './store/index.js' //【1】全局引入store文件

    new Vue({

    el: '#app',

    store,//[5]注入store

    render: h => h(App)

    })

    效果:同上例

    展开全文
  • vue-vuex-webpackvue2 + vuex2 + webpack2 快速构建 版本:v2.x+运行安装依赖$ npm i开发模式:$ npm run dev生产模式:$ npm run build技术栈vue ^2.5.2vue-router ^2.8.1vuex ^2.5.0iview ^2.10.0webpack ^2.5.1...
  • 最近失业了,面试刚好要求写个项目,算是不要忘记自己还是个码农把。暂时没有组件化,有时间再说吧,慢慢优化。废话不多说,先上图。 源码地址:https://github.com/bighuixiang/homework ...
  • 在五一节之前和一网友讨论前端技术时,对方提到vuevue-route如果配合requirejs应用。当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复...
  • mini-vuex模拟VUEX实现

    2020-05-23 12:01:51
    mini-vuex模拟VUEX实现
  • vue模拟后台登陆功能 <template> <div class="login"> <form class="container" @submit.prevent="login"> <div class="form-group"> <label for="exampleInputEmail1">Email&...
  • 文章目录案例多个Vue组件共享相同的数据Vue组件数据不共享 案例 多个Vue组件共享相同的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 正开发过程中 前后端分离或者不分离 ,接口多半是之后与页面的开发 ,所以建立rest的APL的接口 给前端提供虚拟的数据是非常必要的 所以这里我使用了json-server作为工具,支持CORS和JSONP跨域请求,支持GET, POST, PUT,...
  • vuevuex(原创)

    2018-03-28 09:20:45
    vue大家已经很熟悉了,一般中小项目可以不使用vuex对data进行状态管理。vue我认为几个比较重要的点:1、组件和自定义组件2、父、子组件间数据的传递官网原话:在 Vue 中,父子组件的关系可以总结为 prop 向下传递,...
  • Vue-vuex -6

    2020-11-02 11:52:00
    单界面的状态管理 单界面状态管理的实现、 多界面状态管理 Vuex 状态管理图例 Vuex 基本使用 简单案例 挂载到Vue实例中 使用Vuex 的count Vuex 核心概念 State 单一状态树 Getters 基本使用 getters作为参数和传递...
  • Vue.use(Vuex); // 注册上面引入的各大模块 const store = new Vuex.Store({ plugins: [ createPersistedState({ storage: window.sessionStorage, reducer(data) { return { // 设置只储存state中的...
  • 项目地址:vue-simple-template 共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blue 页面(共三个页面) barbara 拥有 权限B 他可以看到 red 和 yellow 页面 ...
  • vuevuex

    2020-04-12 10:50:10
    vuevuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools ...
  • Vue状态管理vuex之action

    2020-04-02 12:23:12
    开始前确定在store的index.js配置文件中引入action.js import actions from './actions' export default new Vuex.Store({ actions }) 在src文件夹下的api文件夹下创建app.js模拟接口数据 export const getAppName =...
  • 因为echarts全都封装了一遍init,setOption,clear等) 1.3 开始整 用vue的脚手架搭个简单框架(我就的cli4,选上vue全家桶router+vuex,其他的看自己),装上1.1的依赖。主要讲我的vuex和socket的结合方案,下图是...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,643
精华内容 2,257
热门标签
关键字:

vue模拟vuex

vue 订阅