总结
- 命令 npm install vuex --save
- 在vue项目的src文件夹下创建一个store文件
- 在store文件中创建一个js文件
- 在js文件中写入
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userInfo: {
name: '',
id: '',
tel: '',
sex: ''
}
}
})
export default store
在vue文件中使用store中存储的数据
- 在main.js中引入 store文件夹中的js文件
import store from 'js文件地址'
new Vue({
store
})
- 在要使用vuex中数据的vue文件中引入数据 以上述userInfo数据为例
第一种
<template>
<div>
{{$store.state.userInfo.name}}
</div>
</template>
第二种写法
<template>
<div>
{{getName}}
</div>
</template>
export default {
data() {
return {}
},
computed: {
getName() {
return this.$store.state.userInfo.name
}
}
}
第三种方法
<template>
<div>
{{userInfo.name}}
</div>
</template>
import { mapState } from 'vuex'
export default {
data() {
return {}
},
computed: {
...mapState([
'userInfo'
])
}
}