博客

vueX是专门为vue.js应用程序开发的状态管理模式，集中管理各组件共享的状态，简单的来说就是一个存储状态的仓库。

1、npm安装

npm install vuex --save-dev

2、在store文件夹下创建store.js文件

import Vue from 'vue';
import VueX from 'vuex';
Vue.use(VueX);

export default new VueX.Store({
  state: {
    projectName:'项目',
    num:1,
    count:0
  },
  getters:{
    projectNameResult(state){
      return state.projectName + state.num;
    }
  },
  mutations:{
    totalProject(state){
      state.total += state.num
    }
  },
  actions:{
    commitTotalProject({commit}){
      commit('totalProject');
    }
  },
});

3、在项目的入口js文件main.js文件

import Vue from 'vue';
import App from './App';
import router from './router/index.js';//引入路由配置文件
import ElementUI from 'element-ui';//引入elementui
import 'element-ui/lib/theme-chalk/index.css';//引入elementui主体色
import store from './store/store.js'//1、引入vuex配置文件

Vue.use(ElementUI);//申明使用elementui
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  store,// 2、vue实例中使用
  components: { App },
  template: '<App/>'
});