vuex

一、vuex

vuex是一个专为Vue.js应用程序开发的状态管理模式。

实现组件全局状态(数据)管理的一种机制,可方便实现组件间数据的共享。

-- vuex 是单向数据流,因此不能用于表单元素。

1. 安装引用

  - npm i vuex --save

  - 在main.js中引入:

    - import Vue from 'vue'

    - import Vuex from 'vuex'

    - Vue.use(Vuex)

  - const store = new Vuex.Store({

    state,

    mutations,

    actions,

    getters

    })

2. 核心概念

  1) state (存放全局共享的实例)

    vuex使用单一状态树,用一个对象就包含了全部的应用层级状态,作为一个“唯一数据源(SSOT)”存在。即每个应用应仅仅包含一个store实例。

  当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会较冗余,因此可采用mapState 辅助函数来帮助生成计算属性:

  import {mapState} from 'vuex'

  export default {

    ...

    compted: mapState({

      count: state => state.count;

      // 传字符串参数 'cont' 等同于 `state => state.count`

      countAlias: 'count',

      //为了能使用 this 获取局部状态,必须使用常规函数

      countPlusLocalState (state) {

        return state.count + this.localcount

      }

    })

  }

  2) Getter (对state中的数据加工处理形成新的数据,不改变原数据)

  可以认为是state的计算属性,getter的返回值会根据其依赖被缓存起来,且只有当它的依赖值发生改变才会被重新计算,getter接受state作为其第一个参数,也可接受其他getter作为第二个参数。

const store = new Vuex.Store({

  state: {

    todos: [

      {id: 1, text: '...', done: true},

      {id: 2, text: '...', done: false},

    ]

  },

  getters: {

    doneTodos: state => {

      return state.todos.filter(todo => todo.done);

    }

  }

})

  mapGetters 辅助函数将store中的getter映射到局部计算属性:

  import {mapGetters} from 'vuex'

  export default {

    ...

    computed: {

      ...mapGetters(['doneTodos',... ])

      // 或使用对象形式

      ...mapGetters({

        todos: 'doneTodos'

      })

    }

  }

  3) Mutations : 更改Vuex的store中的状态的唯一方法是提交mutation。

  mtations中不能执行异步操作,要触发mutation事件需要调用store.commit方法。

  也可使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

const store = new Vuex.Store({

  state: {

    count: 1

  },

  mutations: {

    increment (state, n) {

      state.count += n;

    }

  }

})

import {mapMutations} from 'vuex'

export default {

    ...

    methods: {

      handle() {

        this.$store.commit( 'increment' )

      }

      // 或

      ...mapMutations(['increment ',... ])  //将 this.increment ()映射为 this.$store.commit( 'increment' )

      // 或

      ...mapMutations({

        add: 'increment' //将 this.add()映射为 this.$store.commit( 'increment' )

      })

    }

  }

  4) action 不能直接修改state中的数据

    1. action 提交的是mutation,而不是直接变更状态

    2. action可以包含任意异步操作。 

const store = new Vuex.Store({

  state: {

    count: 1

  },

  mutations: {

    increment (state, n) {

      state.count += n;

    }

  },

  actions: {

    increment(context) {

      context.commit('increment')

    }

  }

})

  action函数接受一个与store实例具有相同方法和属性的context对象,因此可以调用context.commit()提交一个mutation,或通过context.state或context.getters来获取state和getters.

  action通过 store.dispatch来获取

  methods: {

    this.$store.dispatch('increment')

  }

  可使用mapActions 辅助函数将组件的methods 映射为 store.dispatch 调用。

  import {mapActions} from 'vuex'

   methods: {

    ...mapActions([ 'increment' ])

    // 或

    ...mapActions({add: 'increment'})

  }

  5) Module 

  Vuex允许将store分隔成模块,每个模块有自己的state, mutation, action, getter, 甚至是嵌套子模块。

 

posted @ 2020-11-08 15:23  ss_shen  阅读(145)  评论(0)    收藏  举报