【无标题】

	1.  安装   
		  yarn add vuex@3.6.2   | npm i vuex@3.6.2
	2.  创建配置store  store/index.js
		import Vue   from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({配置项/核心概念})
export default store
	3. 挂载实例  main.js
		import store from "@/store"

new Vue({
  ...,
  store
})

存储共享文件:

state
	new  Vuex.Store({
    state:{
      num:10
  }

})
	作用： 存储共享的数据
	访问的方式
		方式1
			$store.state.xx
		方式二
			import {mapState} from 'vuex

computed:{
     ...mapState(["xx"])
}

快捷访问方式:

getters
	new  Vuex.Store({
    ...,
    getters:{
        username(state){
           return  state.userinfo.xx
     }
   }
})
	作用：建立快捷访问的方式
	访问的方式
		方式1
			$store.getters.xx
		方式二
			import {mapGetters} from 'vuex

computed:{
     ...mapGetters(["xx"])
}

异步修改数据方式:

actions
	new  Vuex.Store({
    ...,
   actions:{
        AsyncFn(context,data){
          // 异步操作
          context.commit('Fn',data)
     }
   }
})
	作用：异步修改数据，间接修改数据
	访问的方式
		方式1
			$store.dispatch('fn',data)
		方式二
			import {mapActions} from 'vuex

methods:{
     ...mapActions(["fn"])
}

修改数据方式:

mutations
	new  Vuex.Store({
    ...,
    mutations:{
        Fn(state,data){
           state.xx = data
     }
   }
})
	作用：唯一的直接修改数据的地方
	访问的方式
		方式1
			$store.commit('fn',data)
		方式二
			import {mapMutations} from 'vuex

methods:{
     ...mapMutations(["fn"])
}