Vuex的核心
- State
- Mutation
- Action
- Getter
state
state提供唯一的公共数据源,所有共享的数据都要统一放到store中的state中存储
在组件中访问State的方式:
1).this.$store.state.全局数据名称
this.$store.state.count
2).先按需导入mapState函数:
import { mapState } from 'vuex'
然后数据映射为计算属性:
computed:{ ...mapState(['全局数据名称']) }
Mutation
Mutation用于修改变更$store中的数据,打开store.js文件,在mutations中添加代码如下
mutations: {
方法名 (state,step){
//第一个形参永远都是state也就是$state对象
//第二个形参是调用方法时传递过来的参数
...
}
}
- 使用this.$store.commit(‘方法名’,要传递的参数)
- 导入import { mapMutations } from ‘vuex’,
使用展开运算符
methods:{
...mapMutations(['方法名'])
}
Action
在mutations中不能编写异步的代码,会导致vue调试器的显示出错,在vuex中我们可以使用Action来执行异步操作。
在store.js文件,修改Action
actions: {
方法名 (context,step){
...
context.commit('方法',step);
}
}
- 使用this.$store.dispatch(‘方法名’,step)
- 导入import { mapActions } from ‘vuex’
在方法容器中使用 …mapMutations映射为实例方法
methods:{
...mapMutations(['方法名'])
}
Getter
Getter用于对Store中的数据进行加工处理形成新的数据,不会改变Store中保存的数据
在store.js文件,添加getters
export default new Vuex.Store({
.......
export default new Vuex.Store({
.......
getters:{
//添加了一个showNum的属性
showNum : state =>{
return '最新的count值为:'+state.count;
}
}
})
- 使用{{$store.getters.showNum}}获取
- 导入import { mapGetters } from ‘vuex’
映射为计算属性
computed:{
...mapGetters(['showNum'])
}
安装Vuex
npm install vuex --save
导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
新建store.js,创建store对象
const store =new Vuex.store({
//state中存放的就是全局共享的数据
state:{count:0}
})
将store对象挂载到vue示例中
import Vue from 'vue'
import App from './App.vue'
import store from './store.js'
new Vue({
store,
render: h => h(App)
}).$mount('#app')