VueVuex

Posted 2020-11-23 mijiujs

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({

  state: { // vuex中的数据源

    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 }]

  },

  getters: { // 相当于vue中的computed

    getStateCount: state => { // this.$store.getters.getStateCount获取

      return state.count + 1

    },

    getNewList: state => { // this.$store.getters.getNewList获取

      return state.list.filter(n => n.id < 3)

    }

  },

  mutations: {

    getUserInfo (state, n) { // this.$store.commit(‘getUserInfo‘,n)

      state.userInfo = n

      sessionStorage.userInfo = JSON.stringify(n)

    }

  },

  actions: { // 注册actions,类似vue里的methods

    getUserInfoFun (content, n) { // 接受一个与store实例居右相同方法的属性的content对象 this.$store.dispatch(‘getUserInfoFun‘,n)

      content.commit(‘getUserInfo‘, n)

    }

  }

})

 

mapState、mapGetters、mapActions

在vue文件中首先引用

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

然后获取

  computed: {

    ...mapState({

      count1: state => state.count

    })

  },

 

参考文献

Vuex ：https://vuex.vuejs.org/zh/

5分钟带你入门vuex（vue状态管理）:

https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc