一、配置 store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)


export default new Vuex.Store({
    //store(仓库)
    state: {

          token:'',
       
    },

    //mutations唯一改变state值的地方
    mutations: {
        // 设置token
       setToken(state, data) {
         localStorage.setItem('token', data);
         state.token = data;
       },
    },

    //actions异步改变mutations里方法
    actions: {
        setToken({commit}, data) {
            commit('setToken', data)
        },
    
    }
 

})

 二、main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store"
new Vue({
    el: '#app',
    router,
    store,
    components: { App },
    template: '<App/>'
})

三、调用store数据

import store from './store'

const token = store.state.token;

四、异步更改store的数据 

this.$store.dispatch('setToken', 传递的数据);

 

Logo

前往低代码交流专区

更多推荐