web前端vue之vuex單獨一文件使用方式實例詳解

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

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

Vuex 是什么？

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

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

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

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

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

import Vue from 'vue' //引入vue
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)  // 注冊vuex
export default new Vuex.Store({ // 暴露與new vuex
 state: { // 相當(dāng)于vue里data 存放整個項目的各個狀態(tài)
  number: 0 
 }，
 mutations: { //相當(dāng)于vue里的methods放方法的，定義一些可以用來調(diào)用和修改state里的狀態(tài)值
   addFun (state,num) { 
    state.number = num
   }
 }
})

這個狀態(tà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: { //實時監(jiān)聽
    numbertxt () { // 實時監(jiān)聽在store.js里的值改變
     return store.state.number
    }
   },
  methods:{
   addfun(num){
    store.commit('addFun',num) 
    //顯式的提交 (commit) mutation里的方法來改變值
   }
  }
｝
</script>

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

總結(jié)

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

您可能感興趣的文章: