vuex 的簡單使用
更新時間：2018年03月22日 11:16:20 作者：liuhongyi0104
vuex是一個專門為vue.js設(shè)計的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex 的簡單使用,需要的朋友可以參考下
什么是Vuex？
vuex是一個專門為vue.js設(shè)計的集中式狀態(tài)管理架構(gòu)。狀態(tài)？我把它理解為在data中的屬性需要共享給其他vue組件使用的部分，就叫做狀態(tài)。簡單的說就是data中需要共用的屬性。
1.在vue 組件中
執(zhí)行enabledcheckbox方法 ,true 為參數(shù),用來改變state中的值
this.$store.dispatch("enabledcheckbox",true)
從state獲取useredit的值
this.$store.state.useredit
2 在vuex導(dǎo)出的對象對添加 值到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)
})
總結(jié)
以上所述是小編給大家介紹的vuex 的簡單使用，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
本篇文章主要介紹了Vue中如何實現(xiàn)proxy代理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue與bootstrap實現(xiàn)時間選擇器的示例代碼
本篇文章主要介紹了vue與bootstrap實現(xiàn)時間選擇器的示例代碼，非常具有實用價值，需要的朋友可以參考下2017-08-08
Vue3 Ref獲取真實DOM學(xué)習(xí)實戰(zhàn)
這篇文章主要為大家介紹了Vue3 Ref獲取真實DOM學(xué)習(xí)實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue3?＜script?setup?lang=“ts“＞?的基本使用
<script setup>?是在單文件組件 (SFC) 中使用?composition api?的編譯時語法糖，本文主要講解<script setup>?與?TypeScript?的基本使用，感興趣的朋友跟隨小編一起看看吧2022-12-12
element-ui中的clickoutside點擊空白隱藏元素
這篇文章主要為大家介紹了element-ui中的clickoutside點擊空白隱藏元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
今天小編就為大家分享一篇vue項目出現(xiàn)頁面空白的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue檢測屏幕變化來改變不同的charts樣式實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
解決VueCil代理本地proxytable無效報錯404的問題
這篇文章主要介紹了解決VueCil代理本地proxytable無效報錯404的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vueJs實現(xiàn)DOM加載完之后自動下拉到底部的實例代碼
這篇文章主要介紹了vueJs實現(xiàn)DOM加載完成之后自動下拉到底部的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
本文主要介紹了vue3清空reactive的四種方式,包含使用?Object.assign,使用?Object.keys?和?for...in?循環(huán),使用?delete?操作符和重新賦值4種,感興趣的可以了解一下2024-03-03