1.在src文件夹下创建store(用来存储数据、状态)文件夹并在其中创建index.js文件(index.js 随机命名),在index.js文件中写上
Import Vue from ‘vue’
Import Vuex from ‘vuex’
Import axios from ‘axions’//引入插件文件
Vue.use(Vuex)//使用vuex
Export default new Vuex.Store({
state : {//申明一个state
msg: ‘ ’//申明一个名为msg的空对象用于保存axios请求到的data数据
},
mutations:{//和vue中的methods类似,用于存储方法
getdata (state,res){//申明一个名为getdata的方法//传入state(和上面state对应)res(用于保存 请求过来的数据)
axios.get(‘url’).then((res)=>{//请求
state.msg=res.data//将请求来的data数据赋值给msg
})
}
}
})
2.在main.js文件中注册
import Vue from ‘vue’
import App from ‘./App’
Import store from ‘./store/index.js’//引入store
new Vue({
el: ‘#app’,//实现挂载
store,//使用store
components:{APP},
Template:<APP/>
})
3.设想一个问题,使用axios获取数据,是什么时候获取最佳?毫无疑问当然是页面打开时便通过请求获取到数据,然后在绚烂页面时使用里面的数据,所以在这里,我们就用到了一个钩子函数:beforeCreate()
Import vHeader from ‘@/components/header/header.vue’//导入名为header的子组件
Export default {
Name:’App’,
Components: {
vHeader
},
beforeCreate(){
This. s t o r e . c o m m i t ( ‘ g e t d a t a ’ ) / / 利 用 T h i s . store.commit(‘getdata’)//利用This. store.commit(‘getdata’)//利用This.store.commit触发mutation中的方法
}
}
4.在子组件中对获取到的数据进行computed 计算属性监听
export default {//输出数据
name: ‘vHeader’,
computed: {
seller () {
console.log(this.$
store.state.msg)
return this.$store.state.msg },
}
}
具体如下(仅做参考)
1.在store中存储数据
2.
3.获取数据。
由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态。通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到
4.
有需要可以参考,希望纠正,谢谢!