• 技术文章 >web前端 >Vue.js

    Vuex中常用知识点(总结)

    青灯夜游青灯夜游2020-10-07 14:11:35转载67

    如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,下面我们就来看一下vuex中常用的一些知识点,希望对大家有一定的帮助。

    一、为什么要使用Vuex

    1、多个组件依赖同一个状态,使用组件之间通信方法会非常繁琐,例如多层嵌套组件。

    2、需要全局保存的数据,例如用户、权限信息,全局系统设置

    二、Vuex的五个核心属性

    1、state:存储状态

    // store.jsconst store = new Vuex.Store({
      state: {
        count: 0
      }});// 组件里获取count值$store.state.count

    2、getters:state作为第一个参数,其他getters作第二个参数,返回值会根据他的依赖缓存起来,相当于Vue的计算属性

    // store.jsconst store = new Vuex.Store({
      state: {
        count: 1,
        sum: 2
      },
      getters: {
        getCountAndSum: (state,getters) => {
          return state.count + state.sum;
        }
      }});// 其他组件获取getter$store.getters.getCountAndSum

    3、mutations:修改状态(同步的),state 作为第一个参数,提交载荷作为第二个参数

    const store = new Vuex.Store({
      state: {
        count: 1 
      },
      mutations: {
        increment (state, obj) {
          state.count += obj.n;
        }
      }});// 其他组件调用mutations的方法$store.commit('increment', {n: 100});

    4、actions:异步操作(执行mutations的方法,不是直变更状态)

    const store = new Vuex.Store({
      state: {
        count: 1 
      },
      mutations: {
        increment (state, obj) {
          state.count += obj.n;
        }
      },
      actions: {
        increment (context) {
          context.commit('increment');
        }
      }});// 其他组件调用actions的方法$store.dispatch('increment');

    5、modules:store的子模块

    const a = {
      state: {
        count: 0
      },
      getters: {
        getCount2 (state, getters, rootState) {
          return state.count + 2;
        }
      },
      mutations: {
        increment (state, getters, rootState) {
          state.count++;  
        }
      },
      actions: {
        increment (context) {
          // context.state.count;
          // context.rootState.count;
          context.commit('increment');
        }
      }};const b = {};const store = new Vuex.Store({
      modules: {
         a,
         b  }});// 其他组件调用 (获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b

    三、Vuex辅助函数

    <template>
      <div class="about">
        <h1>count: <span>{{count}}</span></h1>
        <h1>getCount: <span>{{$store.getters.getCount}}</span></h1>
        <h1>sum: <span>{{sum}}</span></h1>
        <h1>getSum: <span>{{$store.getters.getSum}}</span></h1>
        <button @click="clickB">test    </button>
      </div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'; 
    export default {
      name: 'about',
      data () {
        return {
          count: 0,
          sum: 0
        }
      },
      computed: {
        ...mapState({
          count: state => state.count,
          countAlias: 'count',
          countPlusLocalState (state) {
            return state.count + this.localCount;
          }
        }),
        ...mapGetters([
          'getCount', 'getSum'
        ])
      },
      mounted () {
        this.count = this.$store.state.count;
        this.sum = this.$store.state.a.sum;
    
      },
      methods:{
        ...mapMutations(
          'add','addO'
        ),
        ...mapActions([
          'add','addO'
        ]),
        clickB () {
          this.$store.dispatch('add');
          this.$store.dispatch('addO');
        }
      }
    }</script>

    相关推荐:

    2020年前端vue面试题大汇总(附答案)

    vue教程推荐:2020最新的5个vue.js视频教程精选

    更多编程相关知识,请访问:编程入门!!

    以上就是Vuex中常用知识点(总结)的详细内容,更多请关注php中文网其它相关文章!

    本文转载于:简书,如有侵犯,请联系a@php.cn删除
    专题推荐:Vue Vuex
    上一篇:深入研究Vue CLI3 下一篇:Vuex中映射的完整指南
    第13期线上培训班

    相关文章推荐

    • node和laravel项目中预渲染vue.js应用程序• 15个Vue.js高级面试问题• Vue中Computed属性、Methods和Watch之间的差异• Vue项目中使用异步组件来优化性能• 分享Vue项目中会用到的一些实战技巧点• 详解Vue.js中的作用域插槽• Vue.js中使用无状态组件的方法介绍

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网