一：安装vuex：终端中输入npm install vuex
npm install vuex
二：创建一个存储全局变量的文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 要设置的全局变量
demo: '初始值'
},
getters: {
// get方法 获取变量
getdemo (state) {
return state.demo
}
},
mutations: {
// set方法 修改变量
setDevicelist (state, value) {
state.demo = value
} }
})
三：将刚才创建的vuex.js导入到main.js中,并挂载到vue根组件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './module/vuex.js'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
四：在组件中使用全局变量
<template>
<div class="home">
{{this.$store.getters.getdemo}}
</div>
</template>
<script>
export default {
}
</script>
结果：
更改值：
<template>
<div class="home">
{{this.$store.getters.getDemo}}
</div>
</template>
<script>
export default {
data () {
},
mounted () {
this.exchange()
},
methods: {
exchange () {
this.$store.commit('setDemo', '修改后的值')
}
}
}
</script>
结果：
五：在单独的JS文件中使用
新建文件demo.js
// 引入文件，注意这里引用的是当前目录的vuex.store实例
import store from './vuex.js'
//获取变量
console.log(store.getters.getDemo)
在main.js中引入新建的demo.js
import './module/demo.js'
结果：
修改变量：demo.js中
// 引入文件，注意这里引用的是当前目录的vuex.store实例
import store from './vuex.js'
// 获取变量
console.log(store.getters.getDemo)
store.commit('setDemo', '修改后的值')
console.log(store.getters.getDemo)
结果：
在vuex中，只要有一个地方的全局变量发生了变化，那么该变量在其他地方也会同步发生变化
