Vuex_1

时间：2023-04-01 12:54:13 vue.js

一、简介Vuex是一种服务于Vue.js应用程序的状态管理模型。Vue状态管理分为三个部分：状态，它驱动应用程序的数据源视图，以声明的方式将状态映射到视图动作，响应用户在视图上的输入引起的状态变化。vuex的设计思想：当多个组件共享状态时，提取那个共享的状态，并在全局单例中进行管理。通过定义和隔离状态管理中的各种概念，并通过强制执行规则来保持视图和状态之间的独立性，代码变得更加结构化和可维护。2.安装npmInstallnpminstallvuex--save在模块化打包系统中，通过Vue.use()安装vuex（通过全局script标签引用Vuex时，不需要使用Vue.use()安装）importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)3.Store和State每一个Vuex应用的核心都是store仓库，store是一个容器，包含了应用中大部分的state。Vuex与简单全局对象的区别：1.Vuex状态存储是响应式的。当Vue组件从store中读取状态时，如果状态发生变化，相应的组件将相应地高效更新。2.store中的状态不能直接改变。改变的唯一方法是提交突变。更容易跟踪每个状态变化。使用newVuex.Store()创建storeimportVuefrom'vue'importVuexfrom'vuex'/*InstallVuex*/Vue.use(Vuex)//创建store实例conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count++}}})//创建组件实例，读取state，修改stateconstCounter={template:`

Add

`,computed:{//将state定义为计算属性count(){//returnstore.state.count//中rootinstancestore在vm中注册后，所有子组件都可以通过this.$storereturnthis.$store.state.count}},methods:{add(){//修改state，commit必须被提交//商店。commit('increment')//在根实例vm中注册store后，所有子组件都可以通过this.$storethis.$store.commit('increment')}}}//创建一个vue实例，provideacreatedstoreletvm=newVue({el:'#app',store,//将store对象提供给'store'选项，可以将store实例注入所有子组件components:{Counter}})mapState到获取多个状态当组件需要获取多个状态时，将这些状态声明为计算属性会有些重复和冗余。我们可以使用mapState辅助函数来帮助我们生成计算属性。//引入mapState//import{mapState}from'vuex'constmapState=Vuex.mapStateconststore=newVuex.Store({state:{count:0,isLogin:true,user:{username:'Liane',id:'1',性别:'女'}},突变:{increment(state){state.count++}}})constCounter={template:`

增加

`,//使用mapState()辅助函数computed:mapState({//count(){//returnthis.$store.state.count//}//count可以简化如下count:state=>state.count,isLogin:state=>state.isLogin,user:state=>state.user}),方法:{add(){this.$store.commit('increment')}}}letvm=newVue({el:'#app',store,components:{Counter}})当map的计算属性名称与state的子节点名称相同时，也可以传一个字符串数组给mapState()computed:mapState(['count','isLogin','user'])通常我们使用扩展操作符，通过mapState将我们需要的state和组件的computed属性混合起来computed:{...mapState(['count','isLogin','user'])}四、Getter当我们需要store中的一些state来导出一些state时，我们可以使用Getter，getter就像store中的一个computedproperty，会根据它的依赖关系来判断是缓存的，一旦依赖发生变化，就会重新计算//定义一个store来存储待办事项的状态conststore=newVuex.Store({state:{todos:[{id:1,text:'study',done:true},{id:2,text:'exercise',done:true},{id:3,text:'painting',done:false}]},getters:{//获取完成的项目doneTodos:state=>{returnstate.todos.filter(todo=>todo.done)},//获取完成的事件数doneTodosCount:(state,getters)=>{returngetters.doneTodos.length}}})constCounter={template:`

已经完成{{doneTodosCount}}个待办事项

`,computed:{doneTodos(){returnthis.$store.getters.doneTodos},doneTodosCount(){returnthis.$store.getters.doneTodosCount}}}letvm=newVue({el:'#app',商店,components:{Counter}})mapGetterhelperfunctioncomputed:{...mapGetter(['doneTodos','doneTodosCount'])}如果想改变getter属性的名称，可以使用对象形式computed:{...mapGetter({doneCount:'doneTodosCount'})}5.Mutations改变属性的唯一方法在商店中是为了进行突变vuex中的Mutations类似于事件，每个mutation都有一个字符串事件类型（type）和一个回调函数（handler）constmapState=Vuex.mapStateconststore=newVuex.Store({state:{isLogin:false,user:{}},突变:{setLogin(state,val){state.isLogin=val},setUser(state,val){state.user=val}}})constCounter={data(){return{username:''}}，模板：`

{{user.username}}已登录已退出