下面就介绍如何使用vuex：

安装

可以用标签，也可以用npm，我用的是后者，文件不大，几秒钟就装好了。

npm install vuex --save

目录结构

man.js，这里没有在入口文件直接使用，vuex可单独写个模块单独管理

import store from '@/vuex/store'
new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

 vuex -》 store.js 定义各个模块的vuex的集合

import Vue from 'vue'
import Vuex from 'vuex'
import tabs from './modules/tabs'
import scroll from './modules/scroll'
import passValue from './modules/passValue'
import staticData from './modules/staticData'
import jurisdiction from './modules/jurisdiction'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    tabs,
    scroll,
    passValue,
    staticData,
    jurisdiction
  }
})

vuex -》modules -》staticData.js 其中一个vuex模块

const staticData = {
  // 定义的vuex变量
  state: {
    isScroll: false, // 内容区域滚动条控制变量
    area_data: {
      provence: '',
      city: '',
      county: ''
    }
  },
  // 修改vuex变量的方法集合
  mutations: {
    changeScroll (state, data) {
      state.isScroll = data
    },
    changeArea_data (state, data) {
      state.area_data[data[0]] = data[1]
      if (data[0] === 'provence') {
        state.area_data['city'] = ''
        state.area_data['county'] = ''
      } else if (data[0] === 'city') {
        state.area_data['county'] = ''
      }
    }
  }
}

export default staticData

使用

1、使用变量

console.log(this.$store.state.staticData.area_data.provence)
<div>{{$store.state.staticData.area_data.provence}}</div>

2、修改变量

this.$store.commit('changeArea_data', ['provence', data])//方法名，值

也可直接修改值，但官方不提倡如此做

this.$store.state.staticData.area_data.city = 123

以上就是本文的全部内容了，仅代表作者个人观点，作为交流学习之用。