vuex-逆战类-Vuex是专门为Vue.js应用开发的状态管理模型。它使用集中存储来管理应用程序所有组件的状态，并使用相应的规则来确保状态以可预测的方式变化。?简而言之：就是一种状态管理，可以缓存数据，提高性能。是一个全局状态，页面可以访问它，有缓存数据，页面不需要重复提交数据请求，页面渲染更快，一旦状态发生变化，可以在devtools中查看状态变化；可以解决一些复杂的非亲子通信。。如果你要改变状态，当然要按照我的规则？首先你要明白我...Vuex有五个核心概念：1.state：vuex的基础数据，用来存储变量2.getters：store中的state可以导出一些状态。getters的返回值会根据其依赖关系缓存起来，只有当其依赖值发生变化时才会重新计算。3.mutations：提交更新数据的方法必须是同步的（如果需要异步使用action）。每个突变都有一个字符串事件类型（type）和一个回调函数（handler）。t4.actions：与mutations的功能大致相同，区别在于Actions提交mutations而不是直接改变state。动作可以包含任意异步操作。5.modules：模块化的vuex让每个模块都有自己的state、mutations、action和getters，使得结构非常清晰，易于管理。State我们可以通过Vue的Computed获取Vuex的状态，如下 vuexindex.jsexportdefaultnewVuex.Store({state:{MvList:[],carNum:8,Msg:"每一天都很充实"},})在组件中获取其状态computed:{Msg(){returnthis.$store.state.Msg},carNum(){returnthis.$store.state.carNum}}mapStatehelperfunctionwhenacomponentneedsWhen检索多个状态，将它们全部声明为计算属性可能是重复和冗余的。为了解决这个问题，我们可以使用`mapState`辅助函数来帮助我们生成计算属性，这样就可以省去几次按键操作。当然首先要引入import{mapState}from'vuex'computed:{...mapState(['carNum','Msg',]),}gettersgetters接收state作为第一个参数，其他getters作为自己的第二个参数。如果不需要，第二个参数可以省略。例子conststore=newVuex.Store({state:{count:0},getters:{countDouble:function(state){//一个参数返回state.count\*2},countDoubleAndDouble:function(state,getters){returngetters.countDouble\*2}}})和state一样，我们也可以通过Vue的Computed获取Vuex的getter。constapp=newVue({store,computed:{count:function(){returnthis.$store.state.count},countDouble:function(){returnthis.$store.getters.countDouble},countDoubleAndDouble:function(){returnthis.$store.getters.countDoubleAndDouble}},})}mapGetters辅助函数mapGetters辅助函数只是将store中的getter映射到本地的计算属性，类似于state，先import{mapGetters}from'vuex'exportdefault{computed:{//使用对象扩展运算符将getter混合到计算对象中...mapGetters(['countDouble','CountDoubleAndDouble'])}}mutations提交mutations是唯一改变存储中状态的东西方法。如果您想异步使用动作，则变异必须是同步的。exportdefaultnewVuex.Store({state:{MvList:[],carNum:8,Msg:"每一天都很充实"},mutations:{ChangeCarnum(state){state.carNum++},})methods:{todoChange(){this.$store.commit("ChangeCarnum")},}mapMutations辅助函数与其他辅助函数类似，可以使用this.$store.commit('xxx')提交组件中的突变，或者使用mapMutations辅助函数将组件中的方法映射到store.commit调用（store需要注入根节点）。首先import{mapMutations}from'vuex'exportdefault{methods:{...mapMutations([ChangeCarnum]),//mapthis.increment()tothis.$store.commit('ChangeCarnum')}}分布actionsAction是由store.dispatch方法触发store.dispatch('changeMsgAsync')changeMsgAsync(){this.$store.dispatch("changeMsgAsync")//Dispatchanaction}，actions一般做异步操作：{changeMsgAsync(){axios.get('/vue/mv').then(res=>{console.log(res.data.result)//this.commit("getMsg",res.data)this.commit(getMv,res.data)})}}，mapActions辅助函数你在组件中使用this.$store.dispatch('xxx')来分发动作，或者使用mapActions辅助函数将组件方法映射到store.dispatch调用（需要在rootnodefirstInjectstore):首先import{mapActions}from'vuex'methods:{...mapActions(['changeMsgAsync']),}模块使用单个状态树，导致应用程序的所有状态都集中到一个大物体。但是，当应用程序变大时，存储对象可能会变得臃肿。所以模块拆分，constmodule={state:{...},mutations:{...},actions:{...},getters:{...}}exportdefaultmoduleconstmodule={state:{.。cityMoudle'modules:{city}如果在子存储中启用命名空间namespaced:true，则可以像这样访问状态：computed:{...mapState("city",['carNum','Msg',]),}?给我管理各个部门需要管理的共享状态........vuex有不死之身，你知道吗？Vuex优势：与sessionStorage相比，存储数据更安全，在控制台可以看到sessionStorage。vuex的缺点：F5刷新页面后，vuex会重新更新状态，所以存储的数据会丢失?所以为了克服这个问题，出现vuex-persistedstate先下载cnpmi--savevuex-persistedstateornpminstallvuex-persistedstate--savevuex中引入：importcreatePersistedStatefrom'vuex-persistedstate'vuex中newVue.stroe设置：conststore=newVuex.Store({//存储数据，避免使用缓存数据，刷新不会existplugins:\[createPersistedState({storage:window.localStorage//默认是localstoragereducer(val){//添加这个函数限制存储的内容返回{//存储状态下的用户user:val.user}//默认全部保存}})\],})?大致整理了一下vuex的一些知识，所以暂时写到这里，下次再继续。。。。
