npm install vuex

// 初始化一個vuex的實例（數(shù)據(jù)倉庫） 導(dǎo)出即可
import Vuex from 'vuex'
import Vue from 'vue'
 
// 使用安裝
Vue.use(Vuex)
 
// 初始化
const store = new Vuex.Store({
  // 配置（state|mutations|actions）
})
 
export default store

import store from '@/store'
new Vue({
  // 把store對象掛載到vue實例對象中，這樣就可以在所有的組件中獲取store中的數(shù)據(jù)了
  store,
  render: h => h(App),
}).$mount('#app')

// 初始化vuex對象
const store = new vuex.Store({
  state: {
    // 管理數(shù)據(jù)
    count: 0
  }
})

<div>A組件 state的數(shù)據(jù)：{{$store.state.count}}</div>
<div>A組件 state的數(shù)據(jù)：{{count}}</div>

// 把state中數(shù)據(jù)，定義在組件內(nèi)的計算屬性中
computed: {
  // 1. 最完整的寫法
  // count: function () {
  //   return this.$store.state.count
  // },
  // 2. 縮寫
  count () {
    return this.$store.state.count
  }
}
// 不能使用剪頭函數(shù)  this指向的不是vue實例

import { mapState } from 'vuex'

// 使用mapState來生成計算屬性  mapState函數(shù)返回值是對象
// 使用mapState使用對象傳參
// computed: mapState({
//   // 1. 基礎(chǔ)寫法 (state) 代表就是vuex申明的state 
//   // count: function(state) {
//   //   return state.count
//   // }  
//   // 2. 使用箭頭函數(shù)
//   // count: state => state.count
//   // 3. vuex提供寫法 (count是state中的字段名稱)
//   count: 'count',
//   // 4. 當(dāng)你的計算屬性 需要依賴vuex中的數(shù)據(jù) 同時  依賴組件中data的數(shù)據(jù)
//   count (state) {
//     return state.count + this.num
//   }
// })

// 2、mapState參數(shù)是一個數(shù)組
// computed: mapState(['count', 'total'])

// 3、即在內(nèi)部保留原有的計算屬性，又要把store中的數(shù)據(jù)映射為計算屬性
computed: {
  // 組件自己的計算屬性
  calcNum () {
    return this.num + 1
  },
  // 把mapState返回值那個對象進行展開操作（把對象的屬性添加到該位置）
  ...mapState(['count'])
}

// mutations是固定的，用于定義修改數(shù)據(jù)的動作（函數(shù)）
mutations: {
    // 定義一個mutation，用于累加count值
    // increment這個名字是自定義的
    increment (state, payload) {
        // state表示Store中所有數(shù)據(jù)
        // payload表示組件中傳遞過來的數(shù)據(jù)
        state.count = state.count + payload
    },
    decrement (state, payload) {
      state.count = state.count - payload
    }
}

  methods: {
    handleClick1 () {
      // 通過觸發(fā)mutation修改state中的count的值
      this.$store.commit('increment', 2)
    },
    handleClick2 () {
      this.$store.commit('decrement', 1)
    }
  },

methods: {
    // 1、對象參數(shù)的寫法
    // ...mapMutations({
    //   // 冒號右側(cè)的increment是mutation的名稱
    //   // 冒號左側(cè)的increment是事件函數(shù)的名稱，可以自定義
    //   increment: 'increment'
    // })
    // 2、數(shù)組參數(shù)的寫法（事件函數(shù)名稱和mutation名稱一致）
    ...mapMutations(['increment'])
    // 3、這種寫法和第2種等效
    // increment (param) {
    //   // 點擊觸發(fā)該函數(shù)后要再次觸發(fā)mutation的
    //   this.$store.commit('increment', param)
    // }
}

npm i axios
//導(dǎo)入包
import axios from 'axios'

// actions是固定的，用于定義異步操作的動作（函數(shù)）
actions: {
    // 定義了一個action，用于查詢接口數(shù)據(jù)
    async queryData (context, payload) {
        console.log(payload)
        // 調(diào)用接口獲取數(shù)據(jù)
        const ret = await axios.get('http://test.zjie.wang/tab')
        // 必須觸發(fā)mutation修改list的值
        // context類似于this.$store
        context.commit('updateList', ret.data.list)
    }
},
mutations: {
    updateList (state, payload) {
      state.list = payload
    }
}

methods: {
    handleQuery () {
        // 觸發(fā)action(必須調(diào)用dispatch方法)
        this.$store.dispatch('queryData', 111)
    }
}

// 相當(dāng)于 methods申明了一個函數(shù)fn(num){ this.$store.dispatch('queryData', num)}?
// ...mapActions({
// ? fn: 'queryData'
// })
// 相當(dāng)于 methods申明了一個函數(shù)getData(num){ this.$store.dispatch('getData', num)}?
...mapActions(['queryData'])

// 相當(dāng)于state的計算屬性（基于State處理成另外一份數(shù)據(jù)）
// getters的主要應(yīng)用場景：模板中需要的數(shù)據(jù)和State中的數(shù)據(jù)不完全一樣
// 需要基于state中的數(shù)據(jù)進行加工處理，形成一份新的的數(shù)據(jù)，給模板使用
getters: {
? ? getPartList (state) {
? ? ? ? return state.list.filter(item => {
? ? ? ? ? ? return item.id > 1
? ? ? ? })
? ? }
}

caleList () {
? // 注意：獲取getters的值，不需要加括號（當(dāng)屬性使用）
? return this.$store.getters.getPartList
},

import { mapGetters } from 'vuex'
// mapGetters的作用：把getters映射為計算屬性
computed: {
? ? ...mapGetters(['getPartList']),
? ? // ...mapGetters({
? ? // ? calcList: 'getPartList'
? ? // }),
? ? // calcList () {
? ? // ? // 注意：獲取getters的值，不需要加括號（當(dāng)屬性使用）
? ? // ? return this.$store.getters.getPartList
? ? // },
}

import vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex);
?
const state= ()=>{ token:''}
const actions = {
? ?set_token({commit},val){
? ? ?commit("to_token",val)
? }
}
const mutations = {
? ?to_token(state,val){
? ? state.token=val;
? }
}
const getters = {}
?
?
//user模塊
let user = {
? namespaced: true, //一定要開始命名空間。
? state: { userid: 1234 },
? actions: {
? },
? mutations: {
? ? SET_USERID(state, val) {
? ? ? state.userid = val;
? ? }
? },
? getters: {
?
? }
}
?
//購物車數(shù)據(jù)的模塊
let cart = {
? namespaced: true,
? state: { userid: 567 },
? actions: {
?
? },
? mutations: {
? },
? getters: {
?
? }
}
?
?
const store = new Vuex.Store({
? state,
? mutations,
? actions,
? getters,
? modules: {
? ? user,
? ? cart
? },
? plugins: [createPersistedState({
? ? storage: sessionStorage,
? ? key: "token"
? })]//會自動保存創(chuàng)建的狀態(tài)。刷新還在
})
?
export default store

this.$store.state.user.userid
this.$store.commit("user/SET_USERID",12345)// 前面是指定模塊user 中的SET_USERID 方法，后面是傳參 可以是對象、數(shù)組、字符串等

cnpm install vuex-persistedState -S

import createPersistedState from 'vuex-persistedstate'
?
const store = new Vuex.Store({
? state,
? mutations,
? actions,
? getters,
? plugins: [createPersistedState({
? ? storage: sessionStorage,
? ? key: "token"
? })]//會自動保存創(chuàng)建的狀態(tài)。刷新還在
})