快速掌握vuex状态管理

首先在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/>'
})

用法：主要是触发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>