简单几步使用 vuex
2017-09-17 本文已影响0人
知之之
一、安装
~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
}
}
