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了
  • 相关阅读:
    list容器的sort函数
    c++ vector迭代器删除元素
    vs中属性页常用配置介绍2
    vs中属性页常用配置介绍
    error 不是类或命名空间
    实习代码编写中,一些有用的经验
    vs2015环境下生动动态链接库及使用
    STL容器使用的时机
    c++文件和流
    c++接口(抽象类,虚函数,纯虚函数)
  • 原文地址:https://www.cnblogs.com/TreeCTJ/p/13259870.html
Copyright © 2011-2022 走看看