关于vuex心得

之前使用vuex都是迷迷糊糊的,今天从新缕了一遍

1.安装用npm 后面要加上 --save 因为这个vuex包后面成产环境也要用.
2.在src文件夹下新建一个文件夹,起个名字,比如"vuex"或者"store"之类的
3.然后在文件夹下建一个js文件,叫store.js或者index.js都行
4.在文件里面,用improt引入vuex和vue,然后用Vue.use()引用

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

5.在min.js中用import引入,并在下面的实例化vue对象的时候加入

import store from './store/index'

new Vue({
  el: '#app',
  router,
  store,        //<--这里
  components: { App },
  template: ''
})

下面说下项目中的应用

直接上代码,看注释

index.js

//之前说的引入
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

//增加常量对象
const state = {
  loginName: '',
  loginState: -1
}

//下面是方法 
//这里的 mutations 是固定的写法，意思是改变的，
//所以先不用着急，只知道我们要改变 state 的数值的方法，
//必须写在 mutations 里就可以了。
//必须写在 mutations 里就可以了。
//必须写在 mutations 里就可以了。
const mutations = {
  changeLogin(state,status){
    state.loginState = status;
  },
  updLoginName (state, name) {
    state.loginName = name
  }
}

//actions 和上前讲的 Mutations 功能基本一样
//不同点是，actions 是异步的改变 state 状态，而 Mutations 是同步改变状态。
//actions 是可以调用 Mutations 里的方法的
const actions = {
  loginAction({commit},y){
    commit('changeLogin',y);
  },
  updLoginName({ commit }, x){
    commit('updLoginName', x)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

vue组件1 -- 传入/修改

import { mapActions } from 'vuex' //引入
function load(vue) {
    let that = this
    C.call('getUserInfo', {}).then(function (d) {
      vue.userName = d.userName;
      vue.status = d.status;
      vue.updLoginName(vue.userName);      //给vuex传入用户名
      vue.loginAction(vue.status)                  //给vuex传入登录状态
    })
  }
export default {
    data() {
      return {
      };
    },
    methods: {
      ...mapActions([
        'updLoginName',
        'loginAction'
      ])
    }
  };

vue组件2 -- 获取

//script
import { mapMutations } from 'vuex'

  export default {    
    methods: {
      ...mapMutations([
        'loginName',
        'loginState'
      ])
    }
}

 
  {{ $store.state.loginName }}


  请登录

END

自学前端,写的有偏颇之处,还请指点一二