Vuex 的安装和使用

叁歲伎倆 2022-12-04 07:54 77阅读 0赞

一、使用 npm 安装Vuex

npm install vuex --save

二、在 main.js 中引入 Store 并注册 Store

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    //引入
    import store from './store' 
    
    Vue.config.productionTip = false
    
    new Vue({ 
      router,
      //注册
      store,
      render: h => h(App)
    }).$mount('#app')

三、在 Store 的 index.js 中引入Vue Vuex

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)

四、创建一个vuex Store 对象

export default new Vuex.Store({ 
      state: { 
      },
      mutations: { 
      },
      actions: { 
      },
      getters :{ 
      },
      modules: { 
      }
    })

五、state 定义和使用

//state 定义全局共享的数据 所有共享的数据都可以放到state中
    state: { 
        count:0
    }

组件中使用state 有三种方式

1、标签中使用 { { $store.state.count}}
    2、this.$store.state.全局数据名称 （this.$store.state.count）

六、mutations 定义使用及注意事项

// mutations 用于变更Store中的数据
    mutations: { 
      add(state) {  state.count++},
      addn(state,val) {  state.count += val }
    },

组件中使用 mutations 的2种方式

1、不携带参数：this.$store.commit('add')
    2、携带参数：this.$Store.commit('add',3)

mutations 注意事项

1、只能通过mutations来操作Store的数据,不可直接操作Store数据
    2、通过mutations可以集中监控所有数据的变化
    3、不要在mutations中执行异步操作

七、actions 定义及使用

actions: { 
      //actions 专门用来处理异步操作
      addAsync(context) { 
        setTimeout( () => { 
          context.commit('add')
        },1000)
      }
    }

组件中使用 actions 的2种方式

1、不携带参数： this.$store.dispatch('addAsync') context可以认为就是Store 对象
    2、携带参数：this.$store.dispatch('addAsync',val) val参数由组件提供

八、getters 定义及使用

getters :{ 
    	// getters 用于 对Store 中的数据进行加工处理形成新的数据
    	showNum: state = > {  return '单前最新的数量是【'+ state.count +'】'
    }

组件中使用 getters 的方式

组件使用 this.$store.getters.showNum

**最后再来说一下 vuex 是什么**

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。