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