vuex
-
是什么?
vux是为vue.js开发的状态管理模式,它可以将一些共享的数据保存在vuex中,方便程序中的任何组件直接获取或修改共享数据
如果组件之间有要共享的数据,可以直接挂载到vuex中,就不必通过父子组件之间传值了
vuex是一个全局的数据存储区域,就相当于一个数据的仓库 -
怎么用?
安装npm install vuex -S
导入
import vuex from 'vuex'
Vue.use(Vuex)
创建最基本的store实例
const store = new Vuex.Store() {
state: {
// 组件中的data,专门用来存储数据的
count: 0
},
mutations: {
// 组件中的methods
}
}
将vuex创建的store挂载到vm实例上
new Vue({
el: '#app',
render: c => c(app),
router,
store // 只要挂载到vm上,任何组件都能使用store里存取数据
})
注意:
1. 如果在组件中想要访问store中的数据只能通过this.$store.state.***
2. 如果要操作store中的state值,只能通过操作mutations提供的方法,才能操作对应的数据,不推荐直 接操作state中的数据,因为万一导致了数据的紊乱,不能快速定位到错误的原因,因为,每一个组件都可能有操作数据的方法
3. 如果子组件想要调用mutations中的方法,只能使用this.$store.commit(‘方法名’)
4. mutations的函数参数列表中,最多支持两个参数,参数1:state状态;参数2:通过commit提交过来的参数
5. getters只负责对外提供数据,不负责修改数据,如果想要修改数据,在mutations中修改,子组件调用使用this.$store.getters.***
getters和组件中过滤器相似,都没有修改原数据,都是把原数据做了一层包装,提供给调用者
getters和computed也比较像,只要state中的数据发生变化了,getters也正好引用了这个数据,那么会立即触发getters的重新求值