快捷導(dǎo)航

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

更新時(shí)間：2018年01月11日 08:43:54 作者：奇惠_生活

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。這篇文章主要介紹了web前端vue：vuex單獨(dú)一文件使用方式,需要的朋友可以參考下

Vuex 是什么？

Vuex 是一個(gè)專為 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)試工具 devtools extension，提供了諸如零配置的 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)目的話就不推薦大家使用。好了廢話不多說(shuō)上碼：

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

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

import Vue from 'vue' //引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)  // 注冊(cè)vuex
export default new Vuex.Store({ // 暴露與new vuex
 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>
import store from 'store.js' // 老樣先要引入
 export default{
  store:store, // 定義
  computed: { //實(shí)時(shí)監(jiān)聽(tīng)
    numbertxt () { // 實(shí)時(shí)監(jiān)聽(tīng)在store.js里的值改變
     return store.state.number
    }
   },
  methods:{
   addfun(num){
    store.commit('addFun',num) 
    //顯式的提交 (commit) mutation里的方法來(lái)改變值
   }
  }
｝
</script>

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

總結(jié)

以上所述是小編給大家介紹的web前端vue之vuex單獨(dú)一文件使用方式實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: