vue2中引入vuex

1.下载vuex

npm install vuex@3

因为是vue2所以使用的是vuex 3.几的版本

2.创建store仓库 

再src目录下面创建store文件夹并且下面创建index.js

import Vue from 'vue';
import Vuex from 'vuex';
import languageStore from './modules/languageStore';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    languageStore
  }
});

3.创建modules 分类维护每个模块的仓库

//languageStore.js

const state={
  currentLanguage: localStorage.getItem('language') || 'zh',
  globalData: globalData
}
const mutations= {
  SET_LANGUAGE(state, language) {
    state.currentLanguage = language;
  }
}
const actions={
  setLanguage({ commit }, language) {
    commit('SET_LANGUAGE', language);
    // 存储到浏览器
    localStorage.setItem('language', language);
  }
}
const getters= {
  currentLanguage: state => state.currentLanguage,
  globalData: state => state.globalData[state.currentLanguage]
}
export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
};

4.全局注册

再main.js里面全局注册vuex

import Vue from 'vue'
import App from './App.vue'


// 引入vuex
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

5.页面使用

再页面中引入mapGetters, mapActions 

mapGetters就是引入的就是status的值

mapActions就是引入的就是active里面的方法

<template>
<div>
  语言：<el-select v-model="value" style="width: 100px;" placeholder="请选择" @change="changeLanguage(value)">
    <el-option label="中文" value="zh"></el-option>
    <el-option label="English" value="en"></el-option>
    <el-option label="日本語" value="jp"></el-option>
  </el-select>
  
  {{globalData.name}}:{{ globalData.test }}
</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  name: 'IndexPage',
  data() {
    return {
      value: localStorage.getItem('language') || 'zh',
    }
  },
  computed: {
    ...mapGetters('languageStore',['globalData'])
  },
  methods: {
    ...mapActions('languageStore',['setLanguage']),
    changeLanguage(value) {
      this.setLanguage(value);
    }
  }
}
</script>