vuex基本使用

一：安装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')

四：在组件中使用全局变量

结果：

更改值：

结果：

五：在单独的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中，只要有一个地方的全局变量发生了变化，那么该变量在其他地方也会同步发生变化