关于vuex:Vuex的使用

1. 新建下列目录构造

index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
Vue.use(Vuex);

const state = {username: '',// 登录用户名}
export default new Vuex.Store({
  state,
  mutations,
  actions
})

actions.js 文件

/**  * 商城 Vuex-actions*/

export default {saveUserName(context,username){context.commit('saveUserName', username)
  }
}

mutations.js 文件

/** 
 * 商城 Vuex-mutations
*/

export default{saveUserName(state, username) {state.username = username;}
}

在 main.js 中引入

import store from './store'
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

存储

// 第一种办法
let username = 'jack'
this.$store.dispatch('saveUserName',username)
// 第二种办法
import {mapActions} from 'vuex'
methods:{...mapActions(['saveUserName']),
    setName(){
        let username = 'jack'
        this.saveUserName(username);
    }
}

获取

// 第一种办法
computed:{username(){return this.$store.state.username}
}
// 第二种办法
import {mapState} from 'vuex'
computed:{...mapState(['username'])
}