vuex使用步骤

vuex使用步骤
1.安装vuex
在根目录执行如下命令：
npm install vuex --save
修改main.js文件，导入Vuex，
在main.js中，引入：
import Vuex from 'vuex'
Vue.use(Vuex);
创建store文件夹，在里面创建index.js文件
在里面写上：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//公共state对象，存储所有组件的状态
const state={
user:{
name:""
}
}
//唯一取值的方法，计算属性
const getters={
getUser(state){
return state.user;

}
}
//唯一可以修改state值的方法，同步阻塞
const mutations={
updateUser(state,user){
state.user=user;
}
}
//异步调用mutations方法
const actions={
asyncUpdateUser(user){
context.commit("updateUser",user);
}
}
//调用actions方法使用dispach();
//暴露出去
export default Vuex.Store({
state,
getters,
mutations,
actions
})

//最后在main.js中引入，
import Vuex from 'vuex'
vue.use(Vuex);
imort store from './store'
在new Vue({
el:"#app",
router,
store,
render:h=>h(App)
})
//在使用的过程中：
$store.getters.getUser.name