Vuex 使用方法

1、什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
官网：https://vuex.vuejs.org/zh/
gitHub：https://github.com/vuejs/vuex

strict:严格模式 可使用 process.env.NODE_ENV !== 'production'
state：存储状态
mutations：专门修改state数据
actions：组合mutations完成负责操作
getters：类似computed 判断是否登录等

2、安装
npm i vuex

在项目中新建store文件夹，在文件夹下创建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')