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抽離出來一個單獨(dú)的文件，統(tǒng)一管理整個項(xiàng)目的狀態(tài)。

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

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

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

import Vue from 'vue' //引入vueimport Vuex from 'vuex' // 引入vuexVue.use(Vuex)  // 注冊vuexexport default new Vuex.Store({ // 暴露與new vuex state: { // 相當(dāng)于vue里data 存放整個項(xiàng)目的各個狀態(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: { //實(shí)時監(jiān)聽    numbertxt () { // 實(shí)時監(jiān)聽在store.js里的值改變     return store.state.number    }   },  methods:{   addfun(num){    store.commit('addFun',num)     //顯式的提交 (commit) mutation里的方法來改變值   }  }｝</script>

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

總結(jié)

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