简单几步使用 vuex

一、安装

 ~npm install vuex

二、使用：

1.创建文件夹 vuex

2.创建文件 store.js //存放所有状态

~store.js

import Vue from 'vue'

import Vuex from 'vuex'

import mutations from './mutations'

Vue.use(Vuex);

const state = {

httpUrl: ''

}

export default new Vuex.Store({

state,

mutations

})

3.创建文件 mutations.js //用于更改所有状态

~mutations.js

export default {

SET_HTTPURL(state, data) {

state.httpUrl = data;

console.log('设置url地址', data)

}

}

4.mian.js全局引入 store

import store from './vuex/store.js'

new Vue({

store,

.

.

.

})

5.组件中使用

引入 ~ import { mapMutations } from 'vuex' //用于更改状态,只是获取时候不需要

~ methods:{

...mapMutations({

setUrl: "SET_HTTPURL"

}),

set(){

this.setUrl('url')

}

},

computed:{

getUrl(){

return this.$store.state.httpUrl

}

}