Vuex 是什么？

成都創新互聯公司堅持“要么做到，要么別承諾”的工作理念，服務領域包括：成都做網站、網站制作、企業官網、英文網站、手機端網站、網站推廣等服務，滿足客戶于互聯網時代的坡頭網站設計、移動媒體設計的需求，幫助企業找到有效的互聯網解決方案。努力成為您成熟可靠的網絡建設合作伙伴！

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

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

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

當你把項目的都準備好后，都安裝好了vue-cli，webpack，vuex，router等

第一步新建一個叫：store.js的文件內容如下：

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

這個狀態管理的文件都建好了，接下來就是怎么去調用了

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

總結

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