VUEX的基本使用

 

VUEX的基本使用

 

概念

状态管理。公共数据管理工具，可将共享数据保存至vuex中，方便管理公共数据。

 

使用

1. 导包：cnpm I vuex –S
2. 导入vue，vuex；注册vuex：Vue.use(Vuex)
3. 创建store，将store挂载至vm实例中（挂载后，任意组件皆可使用来存取数据）

   const store = new Vuex.Store({

   state: {

   count: 0

   },

   mutations: {

   increment (state) {

state.count++

}

}

})

State:数据；mutations：操纵state里的数据

 

1. 组件获取store中state的数据：

   通过this.$store.state.xxx访问

 

Mutation属性

 

方法参数

最多支持两个参数，第一个参数固定为state（引申：过滤器）。

 

用mutation操纵state中的数据

不要通过this.$store.state.xxx改变数据。Mutation相当于一个代理，一个管理员，帮助组件改变数据。

 

组件调用mutation中方法

组件要调用mutation中的方法，使用this.$store.commit('方法名')

 

提交mutation方法时传参

想传多个参数时，可以传入参数对象或数组

 

Getters属性

 

作用

负责对外提供数据。参数state。

 

使用

this.$store.getters('属性名')，与过滤器，computed类似。只要state中值发生变化，立即重新求值。