Vuex深入学习 --- 基础概念

最新推荐文章于 2022-09-01 22:52:56 发布

原创最新推荐文章于 2022-09-01 22:52:56 发布 · 241 阅读

0 ·

CC 4.0 BY-SA版权

Vue 同时被 2 个专栏收录

9 篇文章

订阅专栏

vuex

6 篇文章

订阅专栏

本文详细介绍Vuex作为Vue.js应用程序的状态管理模式，采用集中式存储管理所有组件的状态，并通过特定规则确保状态变化的可预测性。文章讲解了Vuex的特点，包括响应式状态存储和严格的变更方式，并提供了两种引入Vuex的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex深入学习 --- 基础概念

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

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候
   若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是使用 mutation中的方法
   这样使得我们可以方便地跟踪每一个状态的变化

二.引入:
1. 直接在主文件中引入

    import vuex from 'vuex'
    
    Vue.use(vuex)
    // 将vuex注入到Vue实例中
    const store = new vuex.store({ 
      state: {  
        count: 0
      }
    })
    
    new Vue ({
      vuex,
      render: h => h(App)
    }).$mount('#app')

2.模块式

├── index.html
├── main.js
├── components
│ ├── App.vue
│ └── …
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules # 子模块
├── cart.js # 购物车模块
└── products.js # 产品模块

①. 在src目录下新建一个store文件夹,在内新建一个index.js 这是store入口文件

      import Vue from 'vue'
      import vuex from 'vuex'
      Vue.use(vuex)
      export default new vuex.store({
        state:{
          count: 0
        }
      })

②. 在主文件中引入

   import store from './store'
   new Vue({
     store,
     render: h => h(App)
   }).$mount('#app')

③. 如果有需要,可以继续向下拆分,再用import引入