在src的目录下,创建store文件夹,创建store.js当作仓库
在store.js内容里写
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex); //必不可少
const state = {
msg :'' //用来装数据
}
const mutations ={ // vuex中去操作数据的方法
getdata (state) {
console.log(state); //拿到的数据
axios.get('../../static/data.json').then(function (res) {
state.msg=res.data //拿接口里的数据放到data数据里面
})
}
}
const store = new Vuex.Store({
state,
mutations
})
export default store
在src下的main.js
import store from './store/store.js'
在new的实例中注册
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
在App.vue中
export default {
name: 'App',
created () {
this.$store.commit('getdata')
}
}
在我们要用的组件中使用
computed : {
git () {
return this.$store.state.msg
}
},
在模板中使用
<div v-if="git">
{{git}}
</div>