怎樣用node.js建立vue3.0專案模板自己百度。這裡直接進入vuex簡單使用例項。

什麼是vuex? 官網解釋：Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。

專案結構：

1：首先在專案中新建store.js檔案，.js檔案內容如下：

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({    state:{     count:0    },    getters:{        addcountgetters(state){           return state.count + 4;        }    },    mutations:{//相當於methods,定義一些方法(同步)。方法裡有個預設引數--state      addcount(state){          state.count++;      },      subcount(state){          state.count--;      }    },    actions:{//非同步操作（也可以定義同步方法）。提交mutation，而不是直接變更狀態。      addcountasync(context){          setTimeout(()=>{            context.commit('addcount');          },1000);//延遲一秒。      }    }})

2：在main.js中註冊store.js檔案，js檔案內容如下：

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'Vue.config.productionTip = false//2019.12.11,全域性路由守衛。router.beforeEach((to,from,next)=>{  console.log(to.path+','+from.path);  if(to.path != '/child'){    next();  }else{    alert('沒有許可權進入該頁面！')  }})new Vue({  router,//掛載router.js  store,  render: h => h(App),}).$mount('#app')

3：在views目錄下新建Store.vue元件，在該元件中的計算屬性中監聽，元件內容如下：

4：在主元件App.vue中新增觸發store 中mutations定義的同步方法和actions中定義的非同步或者同步方法。

this.$store.dispatch('')觸發actions中定義的方法。

5：結果顯示：