vue使用store

vue使用store，我的通俗理解是store里的是全局变量，只要改变变量后，其他页面在次使用，获取到的就是改变后的值。
src下创建store文件夹

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state ={
  userinfo: 'lin',
}
const getters ={
  get_userinfo:state=>{
    let userinfo = state.userinfo
    return userinfo
  }
}
const mutations ={
  set_userinfo (state, data) {
    state.userinfo = data
    localStorage.setItem('userinfo', JSON.stringify(data))
  },
}
export default new Vuex.Store({
  getters,
  state,
  mutations
})

这里要装vuex，安装命令：npm install --save vuex
引入
main.js

import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  ...
})

获取userinfo: ‘lin’,

<template>
  
  <div>{{$store.getters.get_userinfo}}div>
template>
<script>
export default {
  name: 'My',
  data () {
    return {
      //data里的用法 this.$store.getters.get_userinfo
      msg: this.$store.getters.get_userinfo
    }
  },
  mounted(){
    //读取全局变量
    console.log( this.$store.getters.get_userinfo)
    //修改全局变量 修改要用commit 然后commit(key,value) key是名，要和mutations下的set_userinfo一致 value是修改的值
    this.$store.commit('set_userinfo','wu')
    //在一次获取，就变成wu
    console.log( this.$store.getters.get_userinfo)//输出'wu'
  }
}
script>