创建一个 store。在components下面新建一个store文件夹,里面新建一个store.js文件
首先创建一个最简单的store框架
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{
//设置属性
menuItems:{}
},
getters:{
//获取属性的状态
},
mutations:{
//改变属性的状态
setMenuItems(state,data){
state.menuItems = data
},
},
actions:{
//应用mutations
},
})
随后在main.js中导入store
import {store} from './store/store.js'
并将store写入vue实例中
new Vue({
el: '#app',
router,
store, //放到实例里面去应用一下
components: { App},
template: '<App/>'
})
Vuex 通过 store
选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)
),通过在根实例中注册 store
选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store
访问到。
(后面会用到相关内容)