1、什么是Vuex
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。
官網(wǎng)：https://vuex.vuejs.org/zh/
gitHub：https://github.com/vuejs/vuex

strict:嚴格模式 可使用 process.env.NODE_ENV !== 'production'
state：存儲狀態(tài)
mutations：專門修改state數(shù)據(jù)
actions：組合mutations完成負責(zé)操作
getters：類似computed 判斷是否登錄等

2、安裝
npm i vuex

在項目中新建store文件夾，在文件夾下創(chuàng)建actions、getters、mutations、index JS文件

image.png

store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import * as getters from './getters';
import * as mutations from './mutations';
import * as actions from './actions';

Vue.use(Vuex);

let locale = localStorage.getItem('locale') || "zh"
const state = {
  locale,
};

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});

store/actions.js
export const setLocale = ({ commit }, data) => {
  commit('setLocale', data);
};

store/getters.js
export const locale = state => state.locale;

store/mutations.js
export const setLocale = (state, data) => {
  state.locale = data;
};

main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index';
Vue.prototype.$store = store
Vue.config.productionTip = false

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