Vuex 是什么？
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
上次我用了一個加減的例子為大家講解vuex的基本的使用方式，和在什么樣的情況下使用。上次還是在一個組件內把這個例子簡單的展示了下，這次我把vuex抽離出來一個單獨的文件，統一管理整個項目的狀態。
上次也說了如果你的項目夠大，那用vuex來管理整個項目的狀態，那是再好不過的，如果是小項目的話就不推薦大家使用。好了廢話不多說上碼：
當你把項目的都準備好后，都安裝好了vue-cli，webpack，vuex，router等
第一步新建一個叫：store.js的文件內容如下：
import Vue from 'vue' //引入vueimport Vuex from 'vuex' // 引入vuexVue.use(Vuex) // 注冊vuexexport default new Vuex.Store({ // 暴露與new vuex state: { // 相當于vue里data 存放整個項目的各個狀態 number: 0 }， mutations: { //相當于vue里的methods放方法的，定義一些可以用來調用和修改state里的狀態值 addFun (state,num) { state.number = num } }})這個狀態管理的文件都建好了，接下來就是怎么去調用了
<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: { //實時監聽 numbertxt () { // 實時監聽在store.js里的值改變 return store.state.number } }, methods:{ addfun(num){ store.commit('addFun',num) //顯式的提交 (commit) mutation里的方法來改變值 } }｝</script>好了整個稍微復雜點vuex獨立抽離的例子就到這里了，有不懂的朋友或喜歡vue的可以加我微信（nihaomeili87）我們一起進步！
總結
以上所述是小編給大家介紹的web前端vue之vuex單獨一文件使用方式實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
