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> <!-- 这里的get_userinfo要和store/index.js里的getters下的get_userinfo一致 --> <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>