精华内容
下载资源
问答
  • vuex属性

    2020-10-25 15:59:10
    const store = new Vuex.Store({ state: { count: 0 } }) 组件访问 State 中数据的第一种方式: this.$store.state.全局数据名称 组件访问 State 中数据的第二种方式: // 1. 从 vuex 中按需导入 mapState ...

    1.state

    State 提供唯一的公共数据源,所有共享的数据都要统一放到 Store 的 State 中进行存储。

    // 创建store数据源,提供唯一公共数据
     const store = new Vuex.Store({
     state: { count: 0 }
     })
     
    组件访问 State 中数据的第一种方式:
    this.$store.state.全局数据名称
    
    组件访问 State 中数据的第二种方式:
    // 1. 从 vuex 中按需导入 mapState 函数
    import { mapState } from 'vuex'
    // 2. 将全局数据,映射为当前组件的计算属性
    computed: {
     ...mapState(['count'])
    }
    

    2.Mutation

    Mutation 用于变更 Store中 的数据。
    ① 只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。
    ② 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。

    // 定义 Mutation
     const store = new Vuex.Store({
     state: {
     count: 0
     },
     mutations: {
     add(state) {
     // 变更状态
     state.count++
     }
     }
     })
     // 触发mutation
     methods: {
     handle1() {
     // 触发 mutations 的第一种方式
     this.$store.commit('add')
     }
     } 
     // 定义Mutation
     const store = new Vuex.Store({
     state: {
     count: 0
     },
     mutations: {
     addN(state, step) {
     // 变更状态
     state.count += step
     }
     }
     })
      // 触发mutation
     methods: {
     handle2() {
     // 在调用 commit 函数,
     // 触发 mutations 时携带参数
     this.$store.commit('addN', 3)
     }
     } 
    

    3.Action

    Action用于处理异步任务。
    如果通过异步操作变更数据,必须通过 Action,而不能使用 Mutation,但是在 Action 中还是要通过触发
    Mutation 的方式间接变更数据

    // 定义 Action
     const store = new Vuex.Store({
     // ...省略其他代码
     mutations: {
     add(state) {
     state.count++
     }
     },
     actions: {
     addAsync(context) {
     setTimeout(() => {
     context.commit('add')
     }, 1000)
     }
     }
     }) 
     // 触发 Action
     methods: {
     handle() {
     // 触发 actions 的第一种方式
     this.$store.dispatch('addAsync')
     }
     } 
    // 定义 Action
     const store = new Vuex.Store({
     // ...省略其他代码
     mutations: {
     addN(state, step) {
     state.count += step
     }
     },
     actions: {
     addNAsync(context, step) {
     setTimeout(() => {
     context.commit('addN', step)
     }, 1000)
     }
     }
     }) 
     // 触发 Action
     methods: {
     handle() {
     // 在调用 dispatch 函数,
     // 触发 actions 时携带参数
     this.$store.dispatch('addNAsync', 5)
     }
     }
    

    4.Getter

    Getter用于对 Store 中的数据进行加工处理形成新的数据。
    ① Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 的计算属性。
    ② Store 中数据发生变化,Getter 的数据也会跟着变化。

    // 定义 Getter
     const store = new Vuex.Store({
     state: {
     count: 0
     },
     getters: {
     showNum: state => {
     return '当前最新的数量是【'+ state.count +'】'
     }
     }
     })
     
    使用 getters 的第一种方式:
    this.$store.getters.名称
    
    展开全文
  • Vuex 属性与 v-model 绑定

    千次阅读 2018-09-17 08:52:37
    Vuex 属性与 v-model 绑定 由于 Vuex 提供的是 mapGetters 和 mapActions 对属性行获取和操作,所以无法直接适配 v-model 的双向绑定形式 更多精彩 更多技术博客,请移步 asing1elife’s blog 官网 Vuex ...

    Vuex 属性与 v-model 绑定

    由于 Vuex 提供的是 mapGetters 和 mapActions 对属性行获取和操作,所以无法直接适配 v-model 的双向绑定形式

    更多精彩

    官网

    Vuex 表单数据绑定

    解决方式

    1. 上述 vuex 的官方文档中提供了适配 v-model 的解决方式
    2. 一种是重写 input 的双向绑定
    3. 另外一种是提供单独的计算属性,并写明 get / set 方法,将 vuex 的 mapGetters / mapActions 分别赋值
    4. 个人认为第二种方式更实用
    展开全文
  • VueX属性的使用

    2020-08-28 11:00:54
    VueX的概念   vuex是vue的状态管理工具,状态即数据。状态管理就是集中管理vue中的通用数据   注意: 不是所有的场景都适用于vuex,只有在必要的时候才使用vuex 使用了vuex之后,会附加更多的框架中的概念进来,...

    VueX的概念

      vuex是vue的状态管理工具,状态即数据。状态管理就是集中管理vue中的通用数据

      注意:

    • 不是所有的场景都适用于vuex,只有在必要的时候才使用vuex
    • 使用了vuex之后,会附加更多的框架中的概念进来,增加了项目的复杂度



    vuex 的使用流程图

    vuex是一个vue的状态管理工具, 统一的管理一些通用的数据

    1. state: 状态, 可以提供数据

    2. mutations: 存放操作数据的方法

    3. getters: 基于state, 得到一些额外的属性 (state的计算属性)

    4. actions: 可以存放一些异步的操作内容, 可以提交mutation, 不可以直接操作state

    5. Module: 可以对Vuex进行分割,形成不同的数据模块(每个模块都有自己的state、mutation、action、getter、和子模块)
      vuex使用流程图

    vuex中如何提供数据,组件如何访问数据

          store与state

    // 创建一个所有组件都能访问到的仓库  组件中: this.$store 访问
    // 仓库中, 包含了存储状态 state, 状态即数据
    // 如果要获取到仓库中的数据, 先要访问到仓库, 再去拿仓库中state中的数据
    const store = new Vuex.Store({
      // 指定了state属性, 用于提供数据, 类似于之前的data, 
      // 区别: state中的数据, 是所有组件都能访问的数据  this.$store.state.xxx
      state: {
        msg: '你好哇',
        count: 100
      }
    })
    
    // 直接访问
    console.log(store.state.count)
    // 由于建立了关联, 组件中访问, 通过  实例.$store.state  
    console.log(vm.$store.state.count)
    console.log(this.$store.state.count)
    



    vue中修改 vuex 的数据(严格模式)

    默认修改是能改的, 但是是不合理的, 所以一般需要开上严格模式
    严格模式: https://vuex.vuejs.org/zh/guide/strict.html

    const store = new Vuex.Store({
      // ...
      strict: true
    })
    

    不要在发布环境下启用严格模式!深度监听消耗性能


    getters属性

     getters在vuex中的作用,相当于vue中的计算属性 , 依赖state中的数据变化而变化,而且和vue中一样具有 缓存 ,直到下回数据发生变化,都只会计算一次.调用也是缓存调用

    const store = new Vuex.Store({
      state: {
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
      },
      getters: {
    
    // getters 会接受 state 数据 作为第一个参数
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      }
    })
    

    Getter 会暴露为 store.getters 对象,你可以以属性的形式访问这些值:

    store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
    //在 store 实例中 可以通过 this.getters 在mutations和Actio中访问到getters中的值
    

    Getter 也可以接受其他 getter 作为第二个参数:

    getters: {
       doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        },
      doneTodosCount: (state, getters) => {
        return getters.doneTodos.length
      }
    }
    

    通过方法访问getters

    getters: {
      // ...
      // 获取到 在state.todos 数组中 对应 id 的 对象
      getTodoById: (state) =>  (id) =>  state.todos.find(todo => todo.id === id)
    }
    
    store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
    

    注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。

        mutations属性


    修改vuex中的数据,必须通过 mutations进行修改,不能直接修改

    1. mutations提供的都是方法, 这些方法是可以修改 state中的数据的
    2. state中的数据变化都要在mutations中进行
    3. 所有的方法的第一个参数, 都是state,表示state对象
    4. mutations中的事件必须时同步函数,异步函数就需要在Action注册在往mutations提交**
    mutations: {
     // state:表示state对象
     add (state) {
       state.count++
     }
    }
    // --------------------------------------
    // 组件中提交mutations
    // 想要修改state,必须触发mutations提供的方法
    this.$store.commit('add')
    

    提交载荷 Payload

    额外参数(Payload)

    // 定义mutations
    // 如果要修改state,需要在mutations的方法修改
    mutations: {
      addNum (state, num) {
        state.count += num
      }
    }
    // --------------------------------------
    // 组件中提交mutations,并带上参数
    this.$store.commit('addNum', 5)
    


    但是只能传递一个参数, 所以如果有多个参数, 传入一个对象即可

    this.$store.commit('addNum', { num: 5, msg: '嘎嘎' })
    

    Mutation 需遵守 Vue 的响应规则
      既然 Vuex 的 store 中的 状态是响应式的 ,那么你在Mutation对象中添加新的数据时,就需要遵循vue的响应规则对新添加的数据进行数据劫持

    //使用
    Vue.set(obj, 'newProp', 123)
    //或者 用新的对象数据替换旧对象中的数据
    state.obj = { ...state.obj, newProp: 123 }
    


    Mutations函数中调用另外的Mutations函数和getters函数

    //  在 store 中是有 this 指向的 可以通过 this 指向当前的 store 实例:
    getters:{
    	cont(state){
    		return  state.const
    }
    },
    mutations:{
    	add (state) {
        state.count++
      },
      del (state) {
      //通过 this 指向当前实例 查找实例中的方法
      	this.commit('add')
      	this.getters.cont
      }
    }
    

       Action属性

    Action 类似于 mutation,不同在于:

    • Action 提交的是 mutation,而不是直接变更状态。 { 通过context.commit() }
    • Action 可以包含任意异步操作
    const store = new Vuex.Store({
     	  state: {
    	      count: 0
    	  },
    	  mutations: {
    	    increment (state) {
    	      state.count++
    	    }
    	  },
    	 actions: {
    	    increment (context) {
    		   context.commit('increment')
        }
      }
    })
    
    //在组件中调用action
    this.$store.dispatch('xxx')
    

    Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.statecontext.getters 来获取 stategetters
     但是这个 context并不是store实例本身,这个就要涉及到Module了,可以先简单理解为,Module就是vue中的组件,context是组件中的data,每个组件都要有自己的data,虽然每个组件中的data都有和 vue根实例上的data一样的属性,但是他们不是一个data,如何是一个data的话,必然会造成,组件datavue根实例data冲突的问题,而context也是一个为了解决多模块数据和根实例数据冲突而设计的.
     因此context并不等于store实例,但是如何你的vuex中没有模块的话,context基部等价于store实例.

    Module

    Module适用于数据量比较大的项目,需要把数据分割成不同的模块方便管理.对于Module建议查看官网文档,里面解释较为详细,这里不在赘述:

    Vuex(Module)

    展开全文
  • vuex属性添加对象

    千次阅读 2017-08-03 13:49:17
    楼主在做Vue项目的时候,遇到了一个问题,在使用Vuex对数据状态进行管理,根据Vuex官方文档上面说的,操作state对象需要通过Mutations,在我使用Mutations对已经初始化的属性(这个变量是空的对象)添加对象时,...

    楼主在做Vue项目的时候,遇到了一个问题,在使用Vuex对数据状态进行管理,根据Vuex官方文档上面说的,操作state对象需要通过Mutations,在我使用Mutations对已经初始化的对象(这个变量是空的对象)添加属性时,控制台会抛出错误,提示该属性没有定义,没有进行初始化;


    刚开始看到这个错误的时候,我也是一脸懵逼,我以为是代码逻辑出了问题,因为对于其他属性的操作都是没问题的,于是又花时间去查看自己的代码,但是反复查看也没有发现问题,后来,又回去查看官方文档,在Vue的官方文档里面,发现了问题所在:点击查看 Vue.set


    我们在Vuex里面初始化的对象,其实都是被Vue观测的,而我们对Vue观测的属性添加对象的时候,是不能直接添加的,必须使用Vue.set方法,vm.$set(target, key, value),应用在Vuex中就是Vue.$set(this.$store.state.obj, name, value)


    在实际的应用中我们是无法直接使用Vue.$set的,如果我们直接使用Vue.$set,而在组件中又没有对Vue(import Vue from 'vue')进行引用的话,控制台就会报错"Vue is undefined",因为全局的Vue在组件中都是以this的形式存在的,因此我们需要用this替换Vue,便可以解决问题。

    最后还是要说一声,Vue确实很好用,能够快速搭建自己的项目。

    展开全文
  • vuex属性以及用法

    2020-06-02 17:43:09
    待补充
  • 》》点此进入声明调用基础文章《《 调用 <div><input type="button" @click="$store.dispatch('listMore')" value="加载更多">...new vuex.Store({ actions:{ listMore(context){ //它其实会默认传...
  • vuex 例子就是点击增加count的值递增加1和递增减1(按步骤安装和复制即可实现) 案例来自于...1.npm安装:npm i vuex --save-dev 2.main.js中: 上面引入的...
  • 他们的作用 1. state:数据状态------------------------------------- 仓库当中的商品 2. mutations:函数,同步操作。更改state---------------- 工人。用来操作商品 ...4. getters:计算属性 5. module...
  • mapGetters 辅助函数 mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: import { mapGetters } from 'vuex' export default { // ... computed: { // 使用对象展开运算符将 getter 混入 ...
  • 1. state:数据状态------------------------------------- 仓库当中的商品 ...4. getters:计算属性 5. modules:模块化。 他们之间的关系 mutations 可以更改我的状态 state 当你请求数据的时候通过 actions
  • 我正在使用vuex和socket.io来进行state.Nodes.nodes更新 . 我正在更新单个节点(索引4),当我使用setInterval记录output_state和计算完全相同的属性(node 4 output_state)时 - 它们在变异后会有所不同!computed: {...
  • Vuex核心属性总结

    2020-11-27 20:29:57
    Vuex是Vue的一个插件。 一、概念: Vuex是对Vue应用中多个组件的共享状态进行集中式的管理(读/写),Vue的应用是一个状态自管理的应用。 二、Vuex的安装: NPM: npm install vuex --save Yarn: yarn add vuex 三、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,652
精华内容 1,060
关键字:

vuex属性

vue 订阅