这篇文章简单讲解Vuex的使用,更详细的见Vuex(二)
Vuex(二)
1、安装Vuex
npm install vuex@3.0.1 -S
2、基本使用
多个组件要使用同一个数据
store.js:
import Vue from 'vue'
//配置vuex的步骤
// 1、运行npm命令安装
// 2、导入包
import Vuex from 'vuex'
//3、注册vuex到vue中
Vue.use(Vuex)
// 4、new Vuex.Store() 实例 得到一个数据仓储对象
var store = new Vuex.Store({
state: {
// 大家可以吧state想象成组件中的data,专门用来存储数据的
// 如果在组件中想要访问store中的数据,只能通过this.$store.state.***来访问
count: 0
},
mutations:{
//注意:如果要操作store中的state值,只能通过调用mutations提供的方法才能操作对应的是数据,不推荐直接操作其中数据
increment(state){
//第一个参数是固定的,就是state
state.count++
}
//如果组件想要调用mutations中的方法只能使用this.$store.commit('方法名')
}
})
// 5、将vuex创建的store挂载到vm实例上,只要挂载到了 vm上,任何组件都能使用store来存取数据
export default store
main.js
HelloWorld.vue
在使用mutaions方法的时候提交参数
getters
getters: {
//注意:这里getters,只负责对外提供数据,不负责修改数据,如果想要修改state中的数据,要用mutations
optCount:function(state){
return '当前最新count值是:' + state.count
}
//和组件中过滤器类似,都是把原数据进行包装提供给调用者
//和computed比较像,只要state中的数据发生了变化,那么如果getter正好也用了这个数据,那么就会立即触发getter的重新赋值
}