Vuex的基本用法
阿新 • • 發佈:2018-11-09
- 安裝
npm install vuex --save
- 新建store.js檔案並在main.js中引入
import Vuex from 'vuex';
import store from './assets/store';
Vue.use(Vuex);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
- store.js檔案中
此處注意 export default new Vuex.Store 大小寫,否則會出錯的
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); export default new Vuex.Store({ state: { sec_name:'', }, mutations:{ charge_path(state,path){ state.sec_name = path.sec_name } } })
- 在A元件中設定vuex中需要的值
let json = {
sec_name: "我的訂單",
};
this.$store.commit("charge_path", json);
- 在B頁面的vuex中對應的值會立即做出改變
this.$store.state.sec_name //我的訂單
用vuex在兄弟元件之間通訊實在是簡單粗暴…挺好