Vuex状态管理库

Vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据
并不是全部项目都需要Vuex,如果项目很小,完全不需要Vuex,如果项目很大,组件很多、数据很多，数据维护很费劲。

state
mutaitons
actions
getters

Vuex基本使用
安装cnpm install --save vuex

在src下面创建store文件夹-->inde.js文件

import Vue from 'vue';
import Vuex from 'vuex';

//使用一次插件
Vue.use(Vuex)
//state 数据存储的地方
const state ={
    count:1
};
//处理actions ,可以书写业务逻辑,也可以异步处理,但不能修改state
const actions ={
    add({commit}){
        commit("ADD");
    }
};

//mutations 唯一修改state的地方

const mutations ={
    ADD(state){
        state.count++
    }
};

//getters理解为计算属性,用于简化仓库数据,让组件获取仓库的数据更加方便
const getters={};

//对外暴露
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

需在main.js入口文件中注册 store
import store from '@/store'

new Vue({
  render: h => h(App),
  //注册路由
  router,
  //注册store
  store
}).$mount('#app')

引用时

//导入mapState 
import { mapState } from 'vuex';
//调用$store身上的dispatch 去操作actions 中的add函数
this.$store.dispatch('add');

如果数据较多,可以单个页面分开写store,在store文件夹里面新建文件夹.