Vuex的使用

import mutations from ‘./Mutations’

Vue.use(Vuex)

const store = new Vuex.Store({

state,

getters,

actions,

mutations

})

export default store

④在main.js中导入并使用store实例

import store from ‘./store’

new Vue({

el: ‘#app’,

router,

store, //在main.js中导入store实例

components: {

App

},

template: ‘’,

data: {

//自定义的事件总线对象，用于父子组件的通信

Bus: new Vue()

}

})

⑤之后按要求编码，即可使用vuex的相关功能

二、利用vuex同步存值

============

点击用户管理显示页面一，角色管理显示页面二，切换的是不同的组件

定义组件VuexPage1.vue

页面一：欢迎来到{{msg}}

定义组件VuexPage2.vue

页面二：欢迎来到{{msg}}

配置路由

import VuexPage1 from ‘@/views/sys/VuexPage1’

import VuexPage2 from ‘@/views/sys/VuexPage2’

{

path: ‘/sys/VuexPage1’,

name: ‘VuexPage1’,

component: VuexPage1

},

{

path: ‘/sys/VuexPage2’,

name: ‘VuexPage2’,

component: VuexPage2

}


传参，将state里面的值传到页面

VuexPage1.vue

页面一：欢迎来到{{msg}}

<button @click=“panta”>吃牛肉拉面呀！

三、利用vuex取值

==========

在mutation中改变state的值

VuexPage1.vue

methods:{

panta(){

// this.$router.push();

// commit里面第一个参数为调用的mutation里的方法,第二个为载荷

this.$store.commit(“setResturantName”,{

resturantName:“沙县小吃”

})

}

},

Mutation.js

export default {

setResturantName: (state, payload) => {

state.resturantName = payload.resturantName;

}

}

VuexPage1.vue

computed: {

msg() {

// return “沪江开心词场”;

return this.$store.getters.getResturantName;

}

}

Getters.js

export default {

getResturantName: (state) => {

return state.resturantName;

}

}

当点击“吃牛肉拉面呀！“时，兰州拉面变为沙县小吃

四、Vuex的异步加载问题

=============

当点击“最后咱们吃什么！”再点击“吃牛肉拉面呀！”

兰州拉面立即变成沙县小吃，六秒后变为宽窄巷