首先在src目录新建一个vuex文件夹,并且创建一个store.js文件
store.js详细内容如下
import Vue from 'vue';
import Vuex from 'vuex';
//注册vuex
Vue.use(Vuex);
//
const state={
userinfo:JSON.parse(localStorage.getItem('userinfo'))
}
console.log(state.userinfo)
const mutations ={
//保存用户数据
SAVE_USERINFO(staet,userinfo){
localStorage.setItem('userinfo',JSON.stringify(userinfo));
state.userinfo=userinfo;
}
}
//创建仓库暴露出去
export default new Vuex.Store({
state,
mutations
})
在main.js里面引入注册并使用store
import Vue from 'vue'
import App from './App'
import router from './router/router'
import store from './vuex/store'
Vue.config.productionTip = false /*
eslint-disable no-new */
new Vue({ el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
import App from './App'
import router from './router/router'
import store from './vuex/store'
Vue.config.productionTip = false /*
eslint-disable no-new */
new Vue({ el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
用法:主要是触发mutations里面定义的方法
<template> <div id="app"> 用户名:{{this.$store.state.userinfo.name}} <img src="./assets/logo.png"> <button @click="add">点我</button> <router-view/> </div> </template> <script> export default { name: 'App', methods:{ add(){ var userinfo={"name":"admin"}; localStorage.setItem('userinfo',JSON.stringify(userinfo)); userinfo=JSON.parse(localStorage.getItem('userinfo')); this.$store.commit('SAVE_USERINFO',userinfo); } } } </script>