vuex 小知识

vuex

由于多个状态分散的跨越在许多组件和交互间各个角落，大型应用复杂度也经常逐渐增长。vue提供了vuex库进行组件数据管理

vuex的功能

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

vuex 基本组件

store
stata
Getters
Mutations
Actions
Modules

创建一个vuex的数据库

const store = new Vuex.Store({
  state: {
    count: 0
  },//存储数据
  mutations: {
    increment (state) {
      state.count++
    }
  }//函数
})

调用数据

store.commit('increment')//在外部引用时一般用this.$store.commit('increment')

mutations

用来存放函数

引用方式

store.commit('')

载荷

store.commit 传入额外的参数，即 mutation 的 载荷（payload）

   const store= new Vuex.Store({

       state:{
           count:0,
           nub1:2,
           nub2:3
       },
       mutations:{
           jia(state,arg){

            state.count+=arg.n
               
           },
           jian(state,arg){

           state.count-=arg.n
               
           }
       },
       })

Getters 与 action

• Vuex 允许我们在 store 中定义『getters』（可以认为是 store 的计算属性）。就像计算属性一样，getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。//依赖于mutations

Action 与mutations关系

乍一眼看上去感觉多此一举，我们直接分发 mutation 岂不更方便？实际上并非如此，还记得 mutation 必须同步执行这个限制么？Action 就不受约束！我们可以在 action 内部执行异步操作：

下面例举两在computed中的运用方式

computed：

  computed:{
      ...Vuex.mapState(['count','nub1','nub2']),
      ...Vuex.mapGetters(['he'])
                  
                  },