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中的数据