vuex的简单理解

下载:npm install vuex --save


store

   action.js

   getter.js

   index.js

   mutation-type.js

   mutation.js



在mian.ja中

import store from './store/'


index.js中

import Vue from 'vue'

import Vuex from 'vuex'

import mutations from './mutations'

import actions from './action'

Vue.use(Vuex)


const state = {
    USERNAME : '',//当前用户的用户名
    PASSWORD : '',//当前用户的密码             <-数据存放的地方

}

export default new Vuex.Store({
    state,                                                      <-参数
    getters,
    actions,
    mutations,

})


mutation-type.js中

important const C_USERNAME = 'C_USERNAME'

important const C_PASSWORD = 'C_PASSWORD'//方法名


mutation.js中

important {

   C_USERNAME,

   C_PASSWORD 

} from './mutation-type.js'


import { getLocal , setLocal } from '../until/until'


export default {

   /**
   * 当前用户的用户名
   */

   [C_USERNAME] (state,val) {

      state.USERNAME = val

   },

   /**
   * 当前用户的密码
   */

   [C_PASSWORD] (state,val) {

      state.PASSWORD = val

   },

}



.vue中

important { maoState, mapMutation } from 'vuex'

                      数据             方法

①、在methods内

   ...mapMutation(['C_USERNAME','C_PASSWORD'])

                               与mutation-types.js相同(左)

②、在computed内

   ...mapState(['USERNAME','PASSWORD'])

                        在state中的数据,取出成功

③、在方法中调用函数 传入值

this.C_USERNAME(this.username);

                            data中的数据


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值