vuex

  1.概念:专门在Vue中实现集中式状态(数据)管理的vue插件,对vue应用中多个组件的共享状态进行集中式读/写,
     并且也是组件间的通信方式,且适用于任意组件间的通信。

  2.使用场景:1.多个组件依赖于同一状态(数据);

        2.来自不同组件的行为需要变更同一状态(数据);

    vue2使用vuex3版本, npm i vuex@3  

    vue3使用vuex4版本,版本不对应无法安装

  3.搭建vuex环境
     1.创建文件:src/store/index.js

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);
//actions对象——响应组件中用户的动作
const actions = {};
//mutations对象——修改state中的数据
const mutations = {};
//state对象——保存实时的数据
const state = {};
//getter用于对state中的数据进行加工
const getter = {};
//创建并暴露stote export default new Vuex.Store({ actions, mutations, state, });

     2.在main.js中创建vm并传入store配置项
      

...
import store from "./store";

...

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

 

    

 

posted @ 2022-04-14 19:22  清水紅葉  阅读(47)  评论(0编辑  收藏  举报