zoukankan      html  css  js  c++  java
  • vuex 的简单使用

    只是 简单的 使用  简单的

    1、根据脚手架 安装vuex

    2、store文件夹下的index.js文件

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

    3、如果在state中写需要存储的数据   例子:例如  需要 全局判断一个按钮的 disabled

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      // 可以使用mapState 辅助函数 来获取state里的值
      state: {
        sendButtonDisable: false  //初始值 false
      },
      mutations: { //mutaions 是唯一改变state值得方法
        modifySendButtonDisable (state, val) {
          state.sendButtonDisable = val
        }
      },
     // 可以使用 mapActions 辅助函数 来改变 我们想改变的state值
      actions: { //Actions来专门进行异步操作,最终提交mutation方法
        modifySendButtonDisableFun (context, val) {
          // 第一个参数 是mutations 的方法名,val 带的参数
          context.commit('modifySendButtonDisable', val)
        }
      },
      modules: {
      }
    })

    4、使用vuex 辅助函数获取state 和 修改 state值

    在需要使用state值 得组件中
    import { mapState } from ' vuex '
    
    computed {
       ...mapState([''sendButtonDisable])
    }
    
    // 就这?   对 没错  就这
    
    // 直接 this.sendButtonDisable 就能使用了哦~~
    // 在需要 修改state值得组件中
    
    import { mapActions } from ' vuex '
    
    methods {
      ...mapActions([' modifySendButtonDisableFun '])
    }
    
    // 没错 就这
    
    // 你就可以使用这个方法了 也就是 之前在action 定义的 方法  传需要传的参数过去就o得k了
  • 相关阅读:
    2021NUAA暑假集训 Day3 题解
    2021NUAA暑假集训 Day2 题解
    2021NUAA暑期模拟赛部分题解
    CodeForces 1038D Slime
    UVA 11149 Power of Matrix
    UVA 10655 Contemplation! Algebra
    UVA 10689 Yet another Number Sequence
    HDU 4549 M斐波那契数列
    HDU 4990 Reading comprehension
    CodeForces 450B Jzzhu and Sequences
  • 原文地址:https://www.cnblogs.com/TreeCTJ/p/13259870.html
Copyright © 2011-2022 走看看