Vuex的使用

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.$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.



有需要可以参考，希望纠正，谢谢！