第web前端vue之vuex單獨(dú)一文件使用方式實(shí)例詳解Vuex是什么？

Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex也集成到Vue的官方調(diào)試工具devtoolsextension，提供了諸如零配置的time-travel調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。

上次我用了一個(gè)加減的例子為大家講解vuex的基本的使用方式，和在什么樣的情況下使用。上次還是在一個(gè)組件內(nèi)把這個(gè)例子簡(jiǎn)單的展示了下，這次我把vuex抽離出來(lái)一個(gè)單獨(dú)的文件，統(tǒng)一管理整個(gè)項(xiàng)目的狀態(tài)。

上次也說(shuō)了如果你的項(xiàng)目夠大，那用vuex來(lái)管理整個(gè)項(xiàng)目的狀態(tài)，那是再好不過(guò)的，如果是小項(xiàng)目的話(huà)就不推薦大家使用。好了廢話(huà)不多說(shuō)上碼：

當(dāng)你把項(xiàng)目的都準(zhǔn)備好后，都安裝好了vue-cli，webpack，vuex，router等

第一步新建一個(gè)叫：store.js的文件內(nèi)容如下：

importVuefrom'vue'//引入vue

importVuexfrom'vuex'//引入vuex

Vue.use(Vuex)//注冊(cè)vuex

exportdefaultnewVuex.Store({//暴露與newvuex

state:{//相當(dāng)于vue里data存放整個(gè)項(xiàng)目的各個(gè)狀態(tài)

number:0

mutations:{//相當(dāng)于vue里的methods放方法的，定義一些可以用來(lái)調(diào)用和修改state里的狀態(tài)值

addFun(state,num){

state.number=num

})

這個(gè)狀態(tài)管理的文件都建好了，接下來(lái)就是怎么去調(diào)用了

template

{{numbertxt}}

button@click="addfun(1)"按鈕1/button

button@click="addfun(2)"按鈕2/button

/template

script

importstorefrom'store.js'//老樣先要引入

exportdefault{

store:store,//定義

computed:{//實(shí)時(shí)監(jiān)聽(tīng)

numbertxt(){//實(shí)時(shí)監(jiān)聽(tīng)在store.js里的值改變

returnstore.state.number

methods:{

addfun(num){

mit('addFun',num)

//顯式的提交(commit)mutation里的方法來(lái)改變值

/script

好了整個(gè)稍微復(fù)雜點(diǎn)vuex獨(dú)立抽離的例子就到這里了，有不懂的朋友或喜歡vue的可以加我微信（nihaomeili87）我們一起進(jìn)步！

以上所述是小編給大家介紹的web前端vue之vu