vuex的使用

安装依赖

cnpm install --save vuex@3.6.2

1.新建文件夹store，index.js文件

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

Vue.use(Vuex);

//state:仓库存储数据的地方
const state = {};
//mutations:修改state的唯一手段
const mutations = {};
//actions：处理action，可以书写自己的业务逻辑，也可以处理异步
const actions = {};
//getters：理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {};
//对外暴露Store类的一个实例
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

2.入口文件main.js中引入和注册store

import Vue from 'vue'
import App from './App.vue'
//引入路由
import router from '@/router'
//引入仓库
import store from '@/store'

new Vue({
  render: h => h(App),
  //注册路由
  router,
  //注册仓库,组件实例的身上会多一个$store属性
  store
}).$mount('#app')