vue项目中引入vuex

如果说vue-router 解决了vue 组件与路由的一一映射问题，那vuex就是对应解决了vue的状态管理。

如果对vur-router引入和vue基础项目搭建有疑惑的读者可以移步

vue 项目中引入vue-router

由于vuex同样是外部依赖，所以安装也就是vuex的第一步：

npm install vuex --save
           

在src目录下新建store文件夹

index.js
//引入外部依赖
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
//新建store实例
const store = new Vuex.Store({
  state: {
    name: 'Rowland'
  },
  mutations: {
    changeName(state) {
      state.name = 'lily';
    }
  }
})
//导出store
export default store;
           

main.js中添加store

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


import store from './store';

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

这样就可以在组件中调用以及在mutation中声明的方法了

$store.state.name
           

methods: {
    handleChildOneClick() {
      this.$store.commit('changeName');
    }
  }