vuex基础知识

vue基础知识

1.vuex简介

1. vuex是什么

Vuex 是一个专为Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

2. vuex解决了什么问题

​ 随着应用程序规模的扩大，应用程序使用的数据量随之增长，我们会遇到两个非常明显的问题

​ 1.如何确保在不同组件中的数据保持同步

​ 2.如何确保每次对于数据的修改都是可追踪的

3. vuex中存什么

   一般情况下，只有多个组件均需要共享的数据，才有必要存储在vuex中，对于某个组件中的私有数据，依旧存储在组件自身的data中

   注意：不要把全部数据放在Vuex中，除非要在多个组件之间共享

2.vuex基本使用

1. 下载vuex

   yarn 安装
   yarn add vuex
   
   npm 安装
   npm i vuex 
   

2. 引入vuex

   为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件

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

3. 注册vuex

   Vue.use(Vuex)
   

4. 定义规则+生成store（Vuex的实例）

   vuex核心概念-state声明变量：state提供唯一的公共数据源，所有共享的数据都要统一放到store中的state属性中存储

   const store = new Vuex.Store({
       state:{ 
           "变量名":值
       }
   })
   export default store //导出store对象
   

5. 挂载到vue实例

   // 在main.js中来引入定义好的vuex
   import Vue from 'vue'
   import App from './App.vue'
   // 在入口文件中引入store
   import store from './store/index.js'
   Vue.config.productionTip = false
   
   // 挂载到vue的实例上
   new Vue({
       store
       render: h => h(App),
   }).$mount('#app')