vue使用store
vue使用store,我的通俗理解是store里的是全局变量,只要改变变量后,其他页面在次使用,获取到的就是改变后的值。src下创建store文件夹index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state ={userinfo: 'lin',}const getters ={get_userinfo:s
·
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>
更多推荐
已为社区贡献7条内容
所有评论(0)