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')
