【Vue】Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装

npm install vuex --save

main.js

import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  //vuex中的数据源
  state: {
    userInfo: (sessionStorage.userInfo) ? JSON.parse(sessionStorage.userInfo) : null,
    count: 1, // this.$store.state.count获取
    list: [{ id: 1, name: 1 }, { id: 2, name: 2 }, { id: 3, name: 3 }]
  },
  //相当于vue中的computed
  getters: {
    getStateCount: state => { // this.$store.getters.getStateCount获取
      return state.count + 1
    },
    getNewList: state => { // this.$store.getters.getNewList获取
      return state.list.filter(n => n.id < 3)
    }
  },
  // 必须同步执行，专注于修改state，理论上修改的state唯一途径
  mutations: {
    getUserInfo (state, n) { // this.$store.commit('getUserInfo',n)
      state.userInfo = n
      sessionStorage.userInfo = JSON.stringify(n)
    }
  },
  // 异步执行，通过commit给mutations来改变state
  actions: { 
    getUserInfoFun (context, n) { // context对象可以理解为store对象 this.$store.dispatch('getUserInfoFun',n)
      context.commit('getUserInfo', n)
    }
  },
  modules: {}
})

mapState、mapGetters、mapActions

在vue文件中首先引用

import { mapState, mapGetters, mapActions } from "vuex";

然后获取

  computed: {
    ...mapState(['a']),
  },