精华内容
下载资源
问答
  • vuex 使用文档小结篇

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

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

    千次阅读 多人点赞 2020-02-05 12:30:00
    什么是Vuex? 官方说明: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具...

    什么是Vuex?

    官方说明:
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

    个人理解:
    vuex就是一个状态管理的工具,如果我们没有用vuex,那么每个组件之间的传值就只能通过存储的方式来存储。这样一旦项目大了过后就不利于数据状态的管理。所以如果我们用到了vuex那么就会方便管理很多。

    引入Vuex

    1.新建一个目录store,在目录下新建一个index.js文件
    在这里插入图片描述
    2.在index.js中添加以下代码:

    import Vue from "vue"
    import Vuex from "vuex"
    //引入cart的vuex模块
    import cart from "@/store/modules/cart.js"
    Vue.use(Vuex)
    export default new Vuex.Store({
    	//当做data
    	state:{
    	},
    	//相当于计算属性
    	getters:{
    	},
    	//同步一些方法
    	mutations:{
    	},
    	//存放异步的方法
    	actions:{
    	}
    })
    

    这里面的state就相当于data,getters相当于computed,mutations存放同步的方法,actions存放异步的方法。

    3.在main.js中引入vuex

    import Vue from 'vue'
    import App from './App'
    import store from './store'       //引入vuex
    Vue.prototype.$store = store      //引入vuex
    Vue.config.productionTip = false
    App.mpType = 'app'
    const app = new Vue({
    	store, 						  //引入vuex
        ...App
    })
    app.$mount()
    

    上面备注引入vuex的代码就是需要添加的。
    这样vuex就引入成功了。

    state的多种用法

    我们通常会把全局或者常用变量放在state中。我们假设一个购物的场景,当我们添加商品到购物车的时候,这时候数据就会在购物车的页面中使用,所以我们就可以将数据存放在state中。如果其它页面想要拿取,直接调用即可。
    我们在state中创建一个list数组:
    在这里插入图片描述
    然后创建一个购物车的Vue页面
    第一种方法
    在onLoad方法中写一下代码:

    console.log(JSON.stringify(this.$store.state.list));
    

    结果:
    在这里插入图片描述
    第二种用法:
    在Vue页面中引入:mapState

    import {mapState} from "vuex"
    

    在computed中添加以下代码:

    ...mapState({
    	list:"list",
    }),  
    

    onload中:

    console.log(JSON.stringify(this.list));
    

    测试结果:
    在这里插入图片描述
    第三种方法:

    在computed中添加以下代码:

    newList(state) {   //   可以进行过滤操作
    		return state.list.filter(v=> v.status)
    }
    

    onload中:

    console.log(JSON.stringify(this.newList));
    

    测试结果:
    在这里插入图片描述
    对商品进行过滤,只输出true的结果。

    Getters的多种用法

    第一种用法:
    在getters中添加以下代码:

    //拿到状态为true的商品
    activeList:(state)=>{
    	//返回状态为true的数据
    	return state.list.filter(v=>v.status)
    },
    

    onload中:

    console.log(this.$store.getters.activeList);
    

    结果:
    在这里插入图片描述
    返回status为true的商品。

    第二种用法:
    Vue页面引入mapGetters

    import {mapState,mapGetters} from "vuex"
    

    在getters中添加以下代码:

    //拿到状态为true的商品
    activeList:(state)=>{
    	//返回状态为true的数据
    	return state.list.filter(v=>v.status)
    },
    

    在computed中添加以下代码:

    ...mapGetters([
    	'activeList',
    ])
    

    onload中:

    console.log(JSON.stringify(this.activeList));
    

    结果:
    在这里插入图片描述
    返回status为true的商品。
    第三种用法:
    将…mapGetters([])改为…mapGetters({}),这样可以将方法重命名。
    在computed中添加以下代码:

    ...mapGetters({
    	//重命名
    	active:'activeList',
    })
    

    onload中:

    console.log(JSON.stringify(this.active));
    

    结果:
    在这里插入图片描述
    返回status为true的商品。

    Mutations的多种

    这个存放许多的同步方法。
    第一种方法:
    在mutations中添加以下代码:

    inc(state,n) {
    			state.number += n;
    			console.log(3333);
    		}
    

    onload中:

    this.$store.commit('inc');
    

    结果:
    在这里插入图片描述
    输出了3333。
    第二种用法:
    在Vue的页面中引入:

    import {mapState,mapGetters,mapMutations} from "vuex"
    

    在methods中添加以下代码:

    // 引入mapMutations
    ...mapMutations([
    		'inc'
    	]),
    

    onload中:

    this.inc() 	
    

    结果:
    在这里插入图片描述
    输出了3333。
    第三种方法
    和getters一样
    在state中添加一个number:
    在这里插入图片描述
    修改mutations代码:

    //同步一些方法
    	mutations:{
    		inc(state,n) {
    			state.number += n;
    			console.log(state.number);
    		}
    	},
    

    在methods中添加以下代码:

    ...mapMutations({
    				Inc2:'inc'
    			}),
    

    onload中:

    this.Inc2(10)
    

    结果:
    在这里插入图片描述
    2+10=12,说明没有问题。

    Action方法的用法

    action里面存放都是异步的方法
    第一种用法:
    在action中添加以下代码:

    AsyncInc({commit,state},n) {
    	// 定时执行
    	setInterval(()=>{
    		commit('inc',20)
    		console.log(state.number);
    	},2000)	
    }
    

    onload中:

    this.$store.dispatch('AsyncInc')
    

    输出结果:
    在这里插入图片描述
    没2秒都会调用inc方法自动加20。
    第二种方法:
    在action中添加以下代码:

    AsyncInc({commit,state},n) {
    			// 定时执行
    			setInterval(()=>{
    				commit('inc',n)
    				console.log(state.number);
    			},2000)	
    		}
    

    在methods中添加以下代码:

    ...mapActions([
    				'AsyncInc'
    			])
    

    onload中:

    this.AsyncInc(100) 
    

    结果:
    在这里插入图片描述
    没2秒自动加100,说明没有问题。

    Vuex的模块化实现

    当我们的项目很大的时候,就会产生很多的数据和方法,如果我们都放在index.js中那么会很不方便管理,所以我们就将vuex进行模块化。
    我们在store中建一个modules文件,并且里面新建一个cart.js文件,我们就可以将购物车的vuex数据写在里面。
    在这里插入图片描述
    然后再index.js中引入cart模块:

    import Vue from "vue"
    import Vuex from "vuex"
    import cart from "@/store/modules/cart.js //引入cart的vuex模块
    Vue.use(Vuex)
    export default new Vuex.Store({
    	modules:{
    		cart:cart,//引入模块
    	}
    })
    

    在state中需要在state的后面加上模块的名字,列如:

    this.$store.state.cart.list
    

    这样就会知道是cart模块的list。

    然后需要注意的地方就是:
    1.每个模块中state的名字不能重复
    2.每个模块中getter只执行一个
    3.mutations和actions都执行

    感谢大家的观看!如有不足请评论指出,谢谢!

    展开全文
  • 这里主要简单讲一讲Nuxt里怎么使用vuex, Nuxt.js 内置引用了vuex模块,所以不需要额外安装。 Nuxt.js 会尝试找到应用根目录下的store目录,如果该目录存在,它将做以下的事情: 引用vuex模块 将vuex模块 加到 ...
  • vuex用法

    vuex使用方法

    前言

    1、官方文档比较正式详细,但看完之后依然一脸懵逼,不知道具体该怎么使用。
    2、本文内容是结合自己在项目开发中总结的比较好用的一种用法。
    3、写这篇文章主要目的是为了自己找资料时方便,同时也分享一下自己的经验,方便他人使用。

    一、什么是vuex?

    这个没什么好说的,官网已经描述的很详细了,点击下方链接可直达。

    vuex官方文档

    二、vuex具体用法

    1、安装

    两种方法都可以

    npm install vuex --save
    yarn add vuex
    

    在main.js中引入

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

    2、添加文件

    项目完整目录如下
    项目完整目录

    3、每个文件具体配置

    <1>、modules

    modules里面添加js文件,命名随意,建议按照模块命名,每个模块仅存储该模块的状态。
    示例:
    假设里面创建了一个 form.js 和 user.js 两个文件
    form.js

    const state = {
      count: 0 // 数量
    };
    
    const mutations = {
      SET_COUNT: (state, data) => {
        state.count++;
      }
    };
    const actions = {};
    
    export default {
      state,
      mutations,
      actions
    };
    

    user.js

    const state = {
      name: 0, // 姓名
      age: 0, // 年龄
    };
    
    const mutations = {
      SET_NAME: (state, data) => {
        state.name = data;
      },
      SET_AGE:(state, data) => {
      	state.age = data;
    };
    const actions = {};
    
    export default {
      state,
      mutations,
      actions
    };
    
    <2>、getters.js

    所有使用的状态在这里都要列出来

    const getters = {
      count: state => state.form.count,
      name: state => state.user.name,
      age: state => state.user.age
    }
    export default getters
    
    <3>、index.js

    modules中创建的文件在index.js中引入一下

    import Vue from 'vue'
    import Vuex from 'vuex'
    import form from './modules/form'
    import user from './modules/user'
    import getters from './getters'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      modules: {
        form,
        user
      },
      getters
    })
    
    export default store
    

    4、使用

    使用方法很简单,只需在具体的.vue文件中引入相应状态即可

    import { mapGetters } from "vuex";
    
    computed: {
      ...mapGetters(["count"]),
    },
    

    如需改变状态也很简单,不需要额外引入,直接调用方法即可

    this.$store.commit("SET_COUNT");
    
    this.$store.commit("SET_NAME", '张三');
    this.$store.commit("SET_AGE", 20);
    

    后记

    至于具体状态如何应用就不做赘述了,跟普通数据一样;
    如有错漏之处还望看到的同学可以在评论中指出,我会不定时进行更新;
    至此,全文结束。

    展开全文
  • vuex 使用详解

    万次阅读 2017-10-23 18:56:37
    Vuex 使用详解 说明 Vuex 是一个专门为 Vue 应用程序开发的状态管理模式,适合开发大型单页应用, 它能够更好的在组件外部管理状态 重要文件版本 “vue”: “^2.5.2”, “vuex”: “^3.0.0” 特点 ...

    Vuex 使用详解

    说明

    Vuex 是一个专门为 Vue 应用程序开发的状态管理模式,适合开发大型单页应用, 它能够更好的在组件外部管理状态

    重要文件版本

    • “vue”: “^2.5.2”,
    • “vuex”: “^3.0.0”

    特点

    每一个 Vuex 应用的和兴就是 store(仓库)。store 基本上就是一个容器,它包含着应用中大部分的状态(state) Vuex 和单纯的全局对象有以下不同

    1. Vuex的状态储存是响应式的,当 Vue 组件从 store 中读取状态时,若store中的状态发生变化,那么相应的组件也会得到高效更新
    2. 不能直接改变 store 中的状态,改变 store 中状态的唯一途径就是显式的提交(commit)mutation 这样可以更方便的跟踪状态的变化

    1. 安装及引入

    1. 下载

        npm install --save vuex

    2. 安装

        // 配置 store 
        import Vue from 'vue';
        import Vuex from 'vuex';
    
        // 通过 Vue.use() 安装 Vuex
        Vue.use(Vuex);
    
        const store = new Vuex.Store({
           state: {},
        });
    
        export default store;
    
        // main.js 中引入 store
        import store from './store/index';
    
        new Vue({
           el: '#app',
           store, // 将 store 实例从根组件中‘注入’到每一个子组件中,子组件通过 `this.$store` 调用
           template: '<app/>',
           components: { App }
        });

    2. API 详解

    一个完整的 store 配置

        const store = new Vuex.Store({
            state: {},
            getters: {}, 
            mutations: {}, 
            actions: {},
            modules: {
            home: {
                state: {},
                getters: {}, 
                mutations: {}, 
                actions: {},
            }
            },
            strict: process.env.NODE_ENV !== 'production'
        });

    1. state

    Vuex 中使用单一状态树,包含了全部应用层级状态,每个应用将仅仅包含一个 store 实例

    在 Vue 组件中获得 Vuex 状态

        // 根组件中注入
        import store from './store.js';
    
        const vm = new Vue({
            el: '#app',
            store, // store 实例注入
        })
    
        // Vue 组件中使用
        const  Child = {
            template: `<div>this is {{count}}</div>`,
            computed: {
                count() {
                    return this.$store.state.count;
                }
            }
        }

    2. mapState 辅助函数

    为了解决 组件在获取多个状态的时候,频繁声明为计算属性有些重复和冗余,可以使用 mapState 辅助函数帮助生成计算属性

        import { mapState } from 'vuex';
        import HomeBasic from '../components/Home/HomeBasic';
    
        export default {
           name: 'Home',
           data () {
              return {};
           },
           components: { HomeBasic },
           computed: {
              step() { //  普通计算属性
                 return 3;
              },
              ...mapState({ // 从 state 中的到的计算属性
                 count: state => state.global,// 可以是一个函数
                 count: 'global', // 可以是一个字符串,等同于 ‘state => state.global’
                 count(state) { // 可以计算
                    return state.global - this.step;
                 }
              })
           },
        };

    3. getter

    state 中一般存放的都是比较原始的数据,我们的应用中使用的可能会是这些原始的数据经过计算后的数据,这时候我们可以在 组件的计算属性中操作

       computed: {
          ...mapState({
             count(state) {
                return state.global * 100;
             }
          })
       },

    如果有多个组件都需要使用这种计算后的属性,这个时候可以使用 getter ,一种类似 Vue 组件中计算属性的方式,同样 getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

        // 定义 getter
        const store = new Vuex.Store({
            state: {
                global: 100,
                step: 3
            },
            getters: {
               count(state) { // 第一个参数是 state 
                  return state.global * 200;
               },
               changeCount(state, getters) { // 可以传入两个参数 第二个参数是当前的 getter 
                  return getters.count - state.step;
               },
               addCount: (state, getters) => (num) => { // 值可以是一个函数,用于传递参数
                  return getters.count - state.step + num;
               }
            }, 
        });
    
        // 组件中使用
        computed: {
            count() {
                    return this.$store.getters.count;
                },
                count2() {
                    return this.$store.getters.changeCount;
                },
                count3() {
                    return this.$store.getters.addCount(10); // 传参
                },
            ...mapState({
            })
        },

    4. mapGetters 辅助函数

    与 mapState() 类似 mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

       computed: {
          ...mapGetters([ // 参数为数组时,可以将同名的属性映射
             'count' 
          ]),
          ...mapGetters({ // 参数为对象时可以设置映射的名称
             count2: 'changeCount'
          })
       },

    5. mutation

    以上 state、getter 都是用来获取 store 中状态的,而更改 store 中状态只能通过提交 mutation ,每个 mutation 都由一个事件类型(type)和一个事件处理函数(handler),事件处理函数接受 state 作为参数,只有在这里才可以进行状态更改

    提交 mutation 需要用到 store 的 store.commit() 方法

    注意: mutation 函数必须是同步的

        // 创建 mutation
        const ADD_COUNT = 'ADD_COUNT'; // 用常量代替事件类型,使得代码更清晰
        const store = new Vuex.Store({
            state: {
                global: 100,
                step: 3
            },
            mutations: {
               [ADD_COUNT] (state, num) { // 第一个参数为 state 用于变更状态
                   state.global += num;
                },
               [ADD_COUNT] (state, payload) { // 第二个参数为提交的参数,参数类型视提交方式而定
                  state.global += payload.num;
               },
            }
        });
    
        // 组件中提交
        methods: {
          handleClick() {
             this.$store.commit('ADD_COUNT', 30); // 普通提交 第二个参数为参数
             this.$store.commit('ADD_COUNT', { num: 30 }); // 可以将参数包装到一个对象中提交
             this.$store.commit({ // 可以直接提交一个对象,对象中 type 属性对应 事件类型,其他属性, 成为事件处理函数的第二个参数对象中的属性
                type: 'ADD_COUNT', 
                num: 30
             });
          },
       },

    6. mapMutations 辅助函数

    同 mapState 和 mapGetters 一样,mapMutations 可以节约代码,使代码更加简洁,他将会在组件的 methods 属性中完成映射

       methods: {
          handleClick() {
             this.addCount({ num: 40 });
             this.ADD_COUNT({ num: 60 });
          },
          ...mapMutations({ 
             addCount: 'ADD_COUNT' // 将 this.addCount({}) 映射为 this.$store.commit('ADD_COUNT', {})
          }),
          ...mapMutations([ // 参数为数组表示函数名不变
             'ADD_COUNT'
          ])
       },

    7. action

    action 类似于 mutation, 不同在于:

    • Action 提交的是 mutation,而不是直接变更状态。
    • Action 可以包含任意异步操作。

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

    // 创建 actions 
        const store = new Vuex.Store({
            state: {
                global: 100,
                step: 3
            },
            mutations: {
               [ADD_COUNT] (state, payload) { 
                  state.global += payload.num;
               },
            },
            actions: {
                changeCount(context, payload) { // 第一个参数为 store 实例类似的对象
                    context.commit({
                        type: ADD_COUNT,
                        ...payload
                    });
               },
               changeCount({ commit }, payload) { // 一般使用解构赋值
                  commit({
                     type: ADD_COUNT,
                     num: payload.num
                  });
               },
               changeCount({ commit }) { // action 中可以尽心异步操作,并且可以提交多次 mutation 
                  request('/api').then(res => {
                     commit({
                        type: ADD_COUNT,
                        num: res.data.num
                     });
                  }).catch(() => {
                     commit({
                        type: ERROR
                     });
                  });
               }
            }
        });
    
        // Vue 组件中使用
        methods: {
          handleClick() {
             this.$store.dispatch('changeCount', { num: 1 });
             this.$store.dispatch({ // 注意如果使用这种方式,changeCount 接受的 payload 中是包含 type: 'changeCount' 字段的 commit 的时候要去除
                type: 'changeCount',
                num: 30
            });
          },
       },

    8. mapActions 辅助函数

    与 mapMutations 类似,用于将 actions 映射到组件中

       methods: {
          handleClick() {
             this.changeCount({ num: 3 });
          },
          ...mapActions({
             changeCount: 'changeCount'
          })
          ...mapActions([
            'changeCount'
          ])
       },

    actions 可以组合使用,也就是在一个 action 中调用另外一个 action

    9. module

    解决使用单一状态树,所有状态集中,使得对象过大的问题,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 的状态

    模块的局部状态

    • 对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态对象。
    • 对于模块内部的 action,局部状态通过 context.state 暴露出来,根节点状态则为 context.rootState
    • 对于模块内部的 getter,根节点状态会作为第三个参数暴露出来

    10. 模块化使用方式

    在辅助函数中使用 module 中数据
        export default {
            computed: {
                ...mapState({
                  // 要使用 模块中的 state 需要 通过 state.[模块名].[模块数据] 引用
                  moduleAData: state => state.moduleA.moduleAData
                }),
                ...mapGetters({
                  //  要使用 模块中的 getter 根使用全局的 getter 一致,因为模块内的 getter 是注册在全局命名空间的
                    moduleAGetterData: 'moduleAGetterData'
                })
            },
            methods: {
            //  mutation、action 与 getter 一样,模块内的 mutation、action 也是注册在全局命名空间的
                ...mapMutations({
                    changeTestList: 'changeTestList'
                }),
                ...mapActions([
                    changeTestList: 'changeTestList'
                ])
            },
            components: {
                SideBarMenu, BasicHeader
            }
        };
    给模块添加命名空间,以提高封装性

    模块中添加 namespaced: true 可以使其成为命名空间模块,模块被注册后,模块内所有 getter action mutation 都会 自动根据 模块注册路径调整命名 (如下)

      // 定义模块
        const moduleA = {
            namespaced: true, // 添加命名空间
            state: {
                test: 'abc'
            },
            getters: {
                upperTest(state) {
                    return state.test.toUpperCase(); 
                }
            },
            mutations: {
                changeTest(state, paylaod) {
                    state.test = payload.test;
                }
            }
        }

    组件中使用

        export default {
            computed: {
                ...mapState({
                    test: state => state.moduleA.test // 模块中的 state 本来就是有层级的所以这里不变
                })
                ...mapGetters({
                    upperTest: 'moduleA/upperTest' // 这里的引用要加上模块名
                })
            },
            methods: {
                ...mapMutations({
                    changeTest: 'moduleA/changeTest' // action 与 mutation 与 getter 的使用一致
                })
            },
        }

    组件中使用的简易写法 给 mapState mapGetters mapMutations mapActions 的第一个参数传入模块的空间名称,这样所有绑定都会自动将该模块作为上下文。

        export default {
            computed: {
                ...mapState('moduleA', ['test']) //传入第一个参数表示绑定的上下文
                ...mapGetters('moduleA', {
                    upperTest: 'upperTest' 
                })
            },
            methods: {
                ...mapMutations('moduleA', {
                    changeTest: 'changeTest' 
                })
            },
        }

    11. 严格模式

    在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

        const store = new Vuex.Store({
          strict: process.env.NODE_ENV !== 'production'
        })

    对比 redux

    • Vuex 与 Redux 都使用了单一组件树,状态都存放在 state 中
    • 如果某个状态的使用涉及到固定的计算处理,那么 Vuex 中可以通过设置 getter 来提取出公共的状态变化方法,而 Redux 中只能在各个组件中处理或者提取出一个函数
    • Vuex 中状态更改只能通过提交(commit)mutation ,而且不能是异步的, Redux 中 reducer 也包括这部分功能;reducer 会接收含有事件类型的对象(type属性)然后根据 type 的类型返回新的 state ,Vuex 中的 mutation 会根据不同的事件类型,对传入的 state 进行操作。
    • Vuex 中如果有异步操作需要更改状态的,要使用 action,action 用来在异步操作后 通过 commit 提交 mutations; 在 Redux 中 action 的功能与其一致,提交更改用的是 dispatch 方法(Vuex 中也有 dispatch 方法,但是是用来触发 action 的)。
    • Vuex 中分割模块用的是 module 属性,这个需求在 Redux 中是通过 创建 reducer 是,分模块引入不同的 初始 state 完成的。
    • Vuex 中为了方便在组件中使用 状态或者状态变更函数,引入了 一些辅助函数 mapState、mapGetters、mapMutations、mapActions;Redux 为配合 React 需要引入 React-Redux 的 connect 方法,将状态与状态处理函数注入到组件中,实现了同样功能

    相关文章

    展开全文
  • 由于Vue多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue提供了vuex。本文将详细介绍Vue状态管理vuex,需要的朋友可以参考下
  • 1、首先需要装vuex npm install vuex -d 2、新建store文件夹,新建index.js, 并引入vue、vuex,代码如下: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const key = 'user' const store = new ...
  • 今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue2.0探索之路--vuex使用场景和集成

    万次阅读 2018-06-19 15:45:46
    一、概述 vuex是一个专为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。二、使用场景 我相信很多人...

     emmm...一直在犹豫要不要写这篇博客,因为觉得这些内容官网已经介绍的很详细了,再复述一遍貌似没太多意义。后面想了下,不复述、总结,如何加深自己的印象和理解呢,毕竟老年人,记性越来越差了。所以,开始吧。

    一、概述

       vuex是一个专为Vue.js应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

    二、使用场景

      我相信很多人都和我一样,在使用vuex之前都会想一个问题(如果你一开始就很明确自己对vuex的需求,那么恭喜你,你很棒棒),为什么要用vuex????这玩意有啥好的,除了听着高大上点,状态管理,那么具体能给我的项目带来什么好处啊,而且我改怎么用它。下面就来简单说说我的理解。

    状态管理,就是管理的全局变量。在我们的项目中,特别是较大型的项目,会有很多参数是很多地方都会用到的,比如,一个登录的token,很多页面都需要这个信息,当然我们可以时刻在对应页面操作cookie,但是有这么个统一管理的地方,为啥不用呢。所以,状态管理不是必需的,所有状态管理能做的,都能用其他方式实现,但是状态管理提供了统一管理的地方,操作方便,也更加明确。但是别啥都往里头扔了,一些只是父组件和子组件用到的,能用$emit和props简单实现的,就用这个就行了。

    三、集成

    先贴上我的集成代码:

    目录结构


    index.js为总入口


    getters:state中的状态获取


    user.js


    api中为请求统一封装


    下面开始对vuex的相关功能做个总结,详情请参考:vuex官网

    1. state

    存在mapState辅助函数,见第六小结

    import Vue from 'vue';
    import App from './App';
    import store from './store/index'
    import './mock/mock';
    
    import router from './router';
    
    import './ui.js'
    
    /* 公共服务平台*/
    import 'static/platform/css/common.less';
    
    var vm = new Vue({
        el: '#app',
        router,
        store,
        template: '<App/>',
        components: {App}
    });
    

    在根组件注册store之后,可以在组件中通过this.$store.state.count访问state中的count参数,在模块中,需要在state后面加上模块名,详情见第五小节。

    2.Getter

    有时候我们需要从store中的state中派生出一些状态,可以通过在store中定义getter(可以看作store的计算属性),Getter接受state作为第一个参数 ,也可以接受其他getter作为第二个参数。存在辅助函数mapGetters,见第六小结

    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)
        }
      }
    })
    
    
    然后可以通过以下方式访问
    this.$store.getters.doneTodos

    3. Mutation

     提交mutation是修改store中的状态的唯一方法。通过提交mutation,vue能监控到数据的变化,然后动态更新节点。

    定义:

    const store = new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        increment (state) {
          // 变更状态
          state.count++
        }
      }
    })

    调用(可传入第二个参数作为入参):

    store.commit('increment')

    对象风格的提交方式:

    store.commit({
      type: 'increment',
      amount: 10
    })

    也可以使用常量替代Mutation事件类型

    //mutation-types.js
    export const SOME_MUTATION = 'SOME_MUTATION';
    
    // store.js
    import Vuex from 'vuex'
    import { SOME_MUTATION } from './mutation-types'
    
    const store = new Vuex.Store({
      state: { ... },
      mutations: {
        // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
        [SOME_MUTATION] (state) {
          // mutate state
        }
      }
    })

    需要注意:Mutation必须是同步函数

    4.Action

    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对象。可以使用参数解构简化代码:

    actions: {
      increment ({ commit }) {
        commit('increment')
      }
    }

    分发Action:

    store.dispatch('increment')

    异步操作:

    actions: {
      checkout ({ commit, state }, products) {
        // 把当前购物车的物品备份起来
        const savedCartItems = [...state.cart.added]
        // 发出结账请求,然后乐观地清空购物车
        commit(types.CHECKOUT_REQUEST)
        // 购物 API 接受一个成功回调和一个失败回调
        shop.buyProducts(
          products,
          // 成功操作
          () => commit(types.CHECKOUT_SUCCESS),
          // 失败操作
          () => commit(types.CHECKOUT_FAILURE, savedCartItems)
        )
      }
    }

    存在mapActions辅助函数,详见第六小结

    5.Module

    为了解决store对象随着项目开发会越来越臃肿,vuex允许将store分割成模块,每个模块拥有自己的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 的状态

    6.辅助函数

    mapState

    普通写法:

    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import { mapState } from 'vuex'
    
    export default {
      // ...
      computed: mapState({
        // 箭头函数可使代码更简练
        count: state => state.count,
    
        // 传字符串参数 'count' 等同于 `state => state.count`
        countAlias: 'count',
    
        // 为了能够使用 `this` 获取局部状态,必须使用常规函数
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
    }
    

    或者

    mapState([
     // 映射 this.count 为 store.state.count
    'count'
    ])

    对象展开运算符

    computed: {
      localComputed () { /* ... */ },
      // 使用对象展开运算符将此对象混入到外部对象中
      ...mapState({
        // ...
      })
    }

    mapGetters

    import { mapGetters } from 'vuex'
    
    export default {
      // ...
      computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
          'doneTodosCount',
          'anotherGetter',
          // ...
        ])
      }
    }

    mapActions

    import { mapActions } from 'vuex'
    
    export default {
      // ...
      methods: {
        ...mapActions([
          'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    
          // `mapActions` 也支持载荷:
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
        ]),
        ...mapActions({
          add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
        })
      }
    }

    四、最后

    总算总结完了,又加深了一遍记忆,还是很好的。

    展开全文
  • 主要介绍了Vuex 使用 v-model 配合 state的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要介绍了nuxt踩坑之Vuex状态树的模块方式使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vuex基本使用

    2018-09-20 15:07:36
    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...
  • vue typescript vuex使用

    2020-07-23 11:34:39
    一、下载vuex-class 下载地址:https://www.npmjs.com/package/vuex-class $ npm install --save vuex-class # or $ yarn add vuex-class 官方示例: import Vue from 'vue' import Component from 'vue...
  • vuex 使用步骤代码

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

    2018-09-26 11:40:04
    一、vuex使用 1.引入vuex import Vuex from "vuex"; 2.state相当于data初始化变量 3.mutations更新数据,方法 4.actions初始化加载数据 二、组件调用vuex全局变量 //变量 test() { return this.$...
  • 本篇文章主要介绍了浅谈vuex之mutation和action的基本使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 非常简单的两个例子,一个普通vuex,一个模块化vuex(进阶)
  • 本项目使用vue-cli(4.4.1)生成,选择的特性主要包含ts + vue-class-component(让我们能够以es6 class的方式来编写组件)。会遇到的一些坑+ vuex原始码解释。 vuex踩坑记录 使用registerModule多次注册同一模块会...
  • 主要介绍了Vuex 使用及简单实例(计数器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Action 提交的是 mutation,而不是直接变更状态。 Action 可以包含任意异步操作。 ...Action 通常是异步的,那么如何知道...使用vuex,redux本身就是希望基于这样一个数据结构的约定,使得项目代码更加直观和简单
  • vuex使用场景

    2021-02-24 14:41:34
    vuex使用场景 首先,我们先来探讨一下,什么情况下vuex才是必须要到的呢? 需要数据共享和行为进行拆分; 复杂的异步逻辑,需要综合... 对比下来,用vuex的mutations进行触发,就显得更加有优势; 我的订单模块,订单
  • 与其他持久性插件不同,通过仅分配Vuex的某些特定对象,Web存储可以节省更多空间,并且还可以与现有Vuex用法一起使用。 通过本地存储的数据绑定可以在多个浏览器选项卡中轻松管理。 它具有强大的数据加密功能,...
  • vuex使用规则

    2018-03-29 12:00:33
    vuex是数据统一集中管理的解决档案,避免了vue组件之间传递数据的麻烦,且其state值同样使用双向数据绑定。 下面利用webpack搭建平台。 1. 在根组件中声明 import Vue from 'vue' import VueX from 'vuex' ...
  • vuex使用方法

    2021-06-17 14:58:56
    vuex是为了保存组件之间的共享数据而诞生的。如果组件之间有要共享的数据可以直接放入vuex中而不必通过父子组件之间传值,如果把组件的数据不需要共享,此时这些不需要的私有的数据没有必要放入vuex中。 import Vue ...
  • vuex使用流程

    千次阅读 2019-04-19 15:24:41
    使用流程 1.安装vuex npm install vuex --save; 2.store文件中引入vuex 为了方便全局使用,一般会新建一个store文件夹,用于存放相关状态值。文件夹下的index.js作为对外输入接口的主文件。在主文件中引入vuex,并...
  • 学习vue 遇到一个问题,音乐无法播放,需要在vuex 即可显示出来,...vuex 可以使用如下 import { Message } from 'element-ui'; Message.closeAll() Message({ message: '您播放的歌曲仅限客户端播放,建议您...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 70,178
精华内容 28,071
关键字:

vuex怎么用

vue 订阅