vuex安装及配置

vuex是什么

vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

vuex的好处

1. 能够在vuex中集中管理共享的数据，易于后期的开发和维护
2. 能够高效率的实现组件之间的数据共享，提高开发效率
3. 存放在vuex中的数据都是响应式的，能够实时保持数据与页面之间的同步

安装

npm install vuex --save

配置

在min.js中挂载

import store from "./store";
Vue.config.productionTip = false;
new Vue({
  store,
  render: (h) => h(App),
}).$mount("#app");

在src文件中创建一个新的store文件 在创建index.js

index.js来配置vuex（配置完就可以使用了）

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {//提供唯一的公共数据源,所有共享数据都要统一放到State中进行存储},
  mutations: {//用于变更state中的数据,只能用它来操作state中的数据（里面不能使用异步操作）},
  actions: {//和mutation功能大致相同,不同之处在与action提交的是mutation,而不是直接变更状态,可以包含异步操作
//如果通过异步操作变更数据,必须通过action,而不能使用mutation,但是在action中还是要通过触发mutation的方式间接变更数据},
  getters：{//从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法  ,他会返回一个新数据，不会影响到state里面的老数据}，
  modules: {//他把store拆分成了一个个小模块，是为了当store很大的时候方便管理，每个模块都有这state，mutations，actions，getters，4个属性},
});