最近面试充斥了流行框架Vue的各种问题,其中Vuex的使用就相当有吸引力。下面我就将自己深入简出的心得记录如下:
1.在vue-init webpack project (创建vue项目)
2.src目录下创建vuex文件夹
3.vuex文件夹下创建store.js文件。文件内容如下:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({
state: {
isCollapse:false
}, mutations: {
isCollapse(state,status){
state.isCollapse = status;
} })
4.编辑main.js文件如下(将store加入到Vue实例中,这样便可以在其他组件中通过this.$store.state.isCollapse来访问我们的store里面设置的状态值了)
import store from './vuex/store' new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
5.在各组件中如何获取状态值(store状态是响应式的,就是说如果你在其他组件设置了状态,那么在下面组件的计算属性就是立马响应到页面)
computed:{
isCollapse(){
return this.$store.state.isCollapse
}
}
6.在各组件中如何设置状态值(通过this.$store.commit来调用mutations方法更新状态值)
methods:{
changeCollapse(){
this.collapse = !this.collapse
this.$store.commit('isCollapse',this.collapse)
}
}