vuex使用步驟剖析

這次帶給大家vuex使用步驟剖析，vuex使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

什麼是Vuex？

vuex是一個專為vue.js設計的集中式狀態管理架構。狀態？我把它理解為在data中的屬性需要共享給其他vue元件使用的部分，就叫做狀態。簡單的說就是data中需要共用的屬性。

1.在vue 元件中

#執行enabledcheckbox方法,true 為參數,用來改變state中的值

  this.$store.dispatch("enabledcheckbox",true)

從state取得useredit的值

this.$store.state.useredit

2 在vuex匯出的物件對新增值到state

##新增mutations 來改變state的值

新增

actions 來mutations

import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex)
export default new vuex.Store({
    state: {
      useredit: false,
    },
    mutations: {
      ENABLEDCHECKBOX(state, value) {
        state.checkboxDisable = value
      },
    },
    actions: {
      enabledcheckbox({ commit }, value) {
        commit('ENABLEDCHECKBOX', value)
      },
    }
  })
  //console.log(vuex)

在main.js

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

#總結

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue實作動態刷新Echarts元件

#在bootstrap中使用selectpicker實作下拉方塊

以上是vuex使用步驟剖析的詳細內容。更多資訊請關注PHP中文網其他相關文章！