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'])
}