這裡的取值方式只針對對 vuex 裡面資料的拿取，不關注在vuex裡面進行了什麼操作；同理,操作值是字面上對 vuex 資料邏輯的簡單處理；主要是在元件中如何去使用 vuex 的幾個核心；

例項化 vuex

import Vue from 'vue';
import Vuex from 'vuex';

//註冊vuex
Vue.use(Vuex);

//例項化vuex
export default new Vuex.Store({
  state: {
    num: 1,
  },
  getters: {
    outdata(state) {
      return state.num + '加了getters';
    }
  },
  mutations: {
　　// 接受兩個引數，state：上邊的資料，payload：資料載荷，需要傳入的資料
    one(state，payload) {
      state.num
 
 +=payload
    }
  },
  actions: {
    two({ commit }) {
      commit('one');
    }
  },
});

取值方式

----State----

插值表示式獲取：{{ $store.state.資料名 }}

  <div class="comp-test">
    <p>{{ $store.state.num }}</p>
    <p>{{ $store.state.模組後的路徑名.num }}</p>
  </div>

使用 computed 屬性計算：返回 this.$store.state.資料名

export default {
  data() {
    return {};
  },
  computed: {
    number() {
      return this.$store.state.num;
      return this.$store.state.模組後的路徑名.num;
    },
  },
};
</script>    

輔助函式---mapState，使用 computed 屬性計算

陣列寫法：...mapState（[ ‘資料名1’ ，‘資料名2’]）；

export default {
  data() {
    return
 
 {};
  },
  computed: {
    ...mapState(['num']),
    ...mapState([‘模組化後的路徑名’，'num']),
  },
};

物件寫法：...mapState（{  自定義的資料名：（state）=>（state.vuex中的資料名）  }）；

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
          newNum: (state) => state.num,       
    }),
    ...mapState({
          newNum: (state) => state.模組後的路徑名.num,       
    }),
  },
};

----Getters----

插值表示式獲取：{{ $store.geeters.fnname }}　　// fname 是指 vuex例項中 Getters 中的函式名

  <div class="comp-test">
    <p>{{ $store.getters.outdata }}</p>
    <p>{{ $store.getters.模組後的路徑名.outdata }}</p>
  </div>

使用 computed 屬性計算：返回 this.$store.geeters.fnname　　// fname 是指 vuex例項中 Getters 中的函式名

export default {
  data() {
    return {};
  },
  computed: {
    number() {
      return this.$store.getters.outdata;
      return this.$store.getters.模組後的路徑名.outdata;
    },
  },
};
</script>   

輔助函式---mapGetters，使用 computed 屬性計算

陣列寫法：...mapGetters（[ ‘資料名1’ ，‘資料名2’]）；

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(['outdata']),
    ...mapGetters([‘模組化後的路徑名’，'outdata']),
  },
};

物件寫法：...mapGetters（{  自定義的資料名：{  type：資料名，payload：載荷引數 }  }）；

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters({
         newName: 'outdata'      
    })
  },
};    

操作值的方式

----Mutations----

直接在元件中操作（不建議使用）：this.$store.state.資料名　　// 直接操作資料，未通過 Mutation

export default {
  data() {
    return {};
  },
  methods: {
     add(){
          this.$store.state.num++     
    })
  },
}; 

寫在 methods 操作：this.$store.commit（fnname）　　// fnname 是指在 vuex例項中 Mutations 中的函式名

export default {
  data() {
    return {};
  },
  methods: {
     add(){
          this.$store.commit('one')
    })
  },
}; 

輔助函式---mapMuation，都作為方法使用；

陣列寫法：  ...mapMuations（[  fnname ]）；　　// fnname 是指在 vuex例項中 Mutations 中的函式名

export default {
  data() {
    return {};
  },
  methods: {
     add(){
            ...mapMutations(['one']),
    })
  },
}; 

物件寫法：物件寫法：   ...mapMuations（{  自定義方法名 {  type：vuex中方法名，payload：params  }  }）；

export default {
  data() {
    return {};
  },
  methods: {
     add(){
          ...mapMutations({
               newName: {
                   type: 'one',
                   payload: 1,
               },
          }),
    })
  },
}; 

----Actions----

在元件中作為方法操作：this.$store.dispatch（fnname）　　// fnname 是指在 vuex例項中 Actions 中的函式名

export default {
  data() {
    return {};
  },
  methods: {
     add(){
         this.$store.dispatch('two');
    })
  },
}; 

輔助函式---mapActions ，都作為方法使用；

陣列寫法：  ...mapActions （[  fnname ]）；　　// fnname 是指在 vuex例項中 Actions 中的函式名

export default {
  data() {
    return {};
  },
  methods: {
     add(){
            ...mapActions(['two']),
    })
  },
}; 

物件寫法：物件寫法：   ...mapActions （{  自定義方法名 {  type：vuex中方法名，payload：params  }  }）；

export default {
  data() {
    return {};
  },
  methods: {
     add(){
          ...mapActions({
               newName: {
                   type: 'two',
               },
          }),
    })
  },
};