学习vuex

最新推荐文章于 2024-07-30 12:57:12 发布

_花开富贵

最新推荐文章于 2024-07-30 12:57:12 发布

阅读量172

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/sinat_42338962/article/details/88417450

版权

本文详细介绍了Vuex的核心概念，包括store、Mutation、Getter、Action和Module的使用。强调了Mutation必须是同步函数，Getter的属性访问和方法访问方式，以及Action的异步操作。同时，讨论了Vuex的模块化、插件机制，如内部Logger插件，严格模式以及表单处理的策略，包括使用计算属性进行双向绑定。

摘要由CSDN通过智能技术生成

概念：

主要应用于Vue.js中管理数据状态的一个库
通过创建一个集中的数据存储,供程序中所有组件访问
跨组件修改状态
平常的可能会涉及到多个组件公用一套数据，使用vuex进行中央状态管理

具体内容：

store

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
   
	//要管理的公共数据在里边定义，相当于普通vue中定义的data
	state:{
   
		isShow:false
	}，
    //定义修改数据的方法
    mutations：{
   
        changeShow(){
   
            //调用数据的时候，不是直接掉，而是this.state
            this.state.isShow=!this.state.isShow
        }
	}，                                
    strict:true,
});

其他组件调用：

<!-- 调用数据 ： $store.state.字段名-->
<div v-if="$store.state.isShow">要展示的内容</div>

<!-- 调用方法 ： $store.commit('方法名')-->
<Button @click="$store.commit('changeShow')"></Button>

//使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

注意：Mutation 必须是同步函数

当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

Getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

const store = new Vuex.Store({
   
  state: {
   
    todos: [
      {
    id: 1, text: '...', done: true },
      {
    id: 2, text: '...', done: false }
    ]
  },
  getters: {
   
    doneTodos: state => {
   
      return state.todos.filter(todo => todo.done)
    }
  }