1.vuex是什么?
2.如何使用vuex
3.mutation修改state数据
4.通过getters包装vuex
1.vuex是全局数据共享区,相当于一个公共数据库,为了保存组件之间共享的数据,只有共享的数据才放在vuex中.
2.使用vuex
a.下载
npm i vuex
b.导包import
import Vuex from 'vuex'
c.vue注册vuex
Vue.use(Vuex)
d.new vuex实例
var store = new Vuex.Store({
state:{
},
mutation:{
},
getters:{
}
})
e.将vuex创建的store挂载到vue实例上
const vm = new Vue({
el:'#app',
render:c=>c(App),
store
})
f.访问store.中的数据,只能用this.$store.state.名称
3.不要用组件自己写的方法去修改store数据,因为这样数据的安全性,正确性无法得到保障。
只能在mutation写方法,注意写的方法只能传递两个参数,第一个参数就是state固定的,第二个可以通过传递对象传递多个参数。
eg:increment(state,只能另一个参数){
state.count++
}
如果自己组建要使用mutation中的方法,只能 用this.$store.commit(‘increment’,只能另一个参数)
4.通过getters包装vuex
getters只能对外提供数据,不负责修改数据,修改数据的是mutation,
getters的return,类似过滤器
getters定义的数据发生改变也会自己改变,类似computed,
getters:{//要记得传state
optCount;function(state){
return state.count
}
}
访问getters里面的数据:this.$store.getters.optCount