[JavaScript知识库]vuex的使用

随手添加的小tips:
响应式添加属性
Vue.set(state.stu[0],'address','landscape')
响应式删除属性
Vue.delete(state.stu[0],'age')

vuex状态管理器

每一个vuex的核心都是一个store(仓库),可以理解为一个非凡的全局变量
store的状态不能直接被修改,只能由commit(mutation)显式地提交

vuex的五个重要概念

getters

类似于计算属性,有缓存,更节能

getters:{   //计算属性,相当于computed
            power(state){
                   return state.counter*state.counter
            }
        },

在组件中的引用

			{{$store.getters.power}}

实现getters中方法的调用
很nice的一个补充

power(state){
                   return state.counter*state.counter
            },
            power3(state,getters){   //导入getters
                return getters.power*state.counter
            },

mutations

通过mutation的commit来改变state的值
步骤如下:

store中的mutation

 mutations:{               
            increment(state){
                    state.counter++
            },
            decrement(state){
                    state.counter--
            }
        },

在组件中引入mutation

  methods:{
    add(){
      this.$store.commit('increment')
    },
    sub(){
      this.$store.commit('decrement')
    }
  }

mutation中参数的传递改变state

组件中的方法

addcount(num){     //num为传递到increnum中的参数
        return this.$store.commit('increnum',num)   
    }

mutation中的方法

increnum(state,num){
                    state.counter+=num
            }

便可传参引用
<button @click="addcount(5)">+5</button>

如果传递的不是一个参数,则可以以对象形式传参

特殊形式的commit封装(对象形式)

this.$store.commit({
		type:'increment',
		参数  //此时的参数为对象
})

actions

action和mutations相似,但是可以代替mutation进行异步操作

modules

用于分块,每个模块都有自己的state,mutation,getters等

当要使用module里面state的数据时,可以通过
$store.state.a.name
获取其他如mutations,getters则不需要
module中getters中的方法可以传三个参数

adddd(state,getters,rootstate){
        return getters.addd+rootstate.counter
            }

rootstate表示父元素的state