Vuex 2.0 深入简出

最近面试充斥了流行框架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)

}

}

巴特西

Vuex 2.0 深入简出

最新文章

热门文章