1. 程式人生 > >Vuex的基本用法

Vuex的基本用法

  • 安裝
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在兄弟元件之間通訊實在是簡單粗暴…挺好