技術標籤：vue

在src下面新建一個資料夾 store

index.js檔案

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
Vue.use(Vuex);

const state = {
  name:'',//名字
  count:0 //商品數量
}
export default new Vuex.Store({
  state,
  mutations,
  actions
});

在main.js 掛載

import
 
 store from './store'

在元件中使用
1.第一種方式

//獲取state的值
 computed:{
     name(){
        return this.$store.state.name;
      },
      count(){
        return this.$store.state.count;
      }
    },
 methods:{
 	  // 獲取商品數量
      getCartCount(){
        this.axios.get('/carts/products/sum').then((res=0)=>{
          this
 
.$store.dispatch('saveCount',res);
        })
      },
      // 獲取使用者名稱稱
     login(){
       this.axios.post('/user/login',{
        username,
        password
      }).then((res)=>{
        this.$store.dispatch('saveName',res.username);
      })
     },
    }，   

2.第二種方式
import {mapState， mapActions } from ‘vuex’;

computed:{
 	/*username(){
        return this.$store.state.username;
      },
      cartCount(){
        return this.$store.state.cartCount;
      }*/
    ...mapState(['name','count'])
    },
 methods:{
      ...mapActions(['saverName','saveCount']),
 	  // 獲取商品數量
      getCartCount(){
        this.axios.get('/carts/products/sum').then((res=0)=>{
          // this.$store.dispatch('saveCount',res);
          this.saveCount(res);
        })
      },
      // 獲取使用者名稱稱
     login(){
       this.axios.post('/user/login',{
        username,
        password
      }).then((res)=>{
       // this.$store.dispatch('saveName',res.username);
       this.saveName(res.username);
      })
     },
    }，

action.js檔案

export default {
  saveName(context,username){
    context.commit('saveName', username);
  },
  saveCount(context, count) {
    context.commit('saveCount', count);
  }
}

mutations.js檔案

export default {
  saveName(state, username) {
    state.name = username;
  },
  saveCount(state, count) {
    state.count = count;
  }
}