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了