精华内容
下载资源
问答
  • Vuex的五个核心属性

    2020-08-30 19:17:03
    Vuex的五个核心属性 https://blog.csdn.net/weixin_35955795/article/details/57412181

    Vuex的五个核心属性
    https://blog.csdn.net/weixin_35955795/article/details/57412181

    展开全文
  • vueX的五个核心属性

    2019-05-22 14:44:00
    state即Vuex基本数据! state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中。但是如果很多组件都使用这过滤后数据,这就是getters存在意义。我们可以认为,...

    state:

    state即Vuex中的基本数据!
    state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据,这就是getters存在的意义。我们可以认为,【getters】是store的计算属性。

    getters(相当于State的计算属性) :

    1基础用法:

    main.js:

    const store = new Vuex.Store({
      state: {
        list: [1, 3, 5, 7, 9, 20, 30]
      },
      getters: {
        filteredList: state => {
          return state.list.filter(item => item > 5)
        }
      }
    })

    index.vue:

    <script>
      export default {
        name: "index.vue",
        computed: {
          list() {
            return this.$store.getters.filteredList;
          }
        }
      }
    </script>

    2.内部依赖

    getter 可以依赖其它已经定义好的 getter。比如我们需要统计过滤后的列表数量,就可以依赖之前定义好的过滤函数。
    main.js:

    const store = new Vuex.Store({
      state: {
        list: [1, 3, 5, 7, 9, 20, 30]
      },
      getters: {
        filteredList: state => {
          return state.list.filter(item => item > 5)
        },
        listCount: (state, getters) => {
          return getters.filteredList.length;
        }
      }
    })

    index.vue:

    <template>
     
      <div>
        过滤后的列表:{{list}}
        <br>
        列表长度:{{listCount}}
      </div>
    </template>
     
    <script>
      export default {
        name: "index.vue",
        computed: {
          list() {
            return this.$store.getters.filteredList;
          },
          listCount() {
            return this.$store.getters.listCount;
          }
        }
      }
    </script>

    mutation(提交更改数据的方法,同步!必须是同步函数) :

    使用vuex修改state时,有两种方式:

    1)可以直接使用 this.$store.state.变量 = xxx;

    2)this.$store.dispatch(actionType, payload)或者 this.$store.commit(commitType, payload)

    main.js:

    const store = new Vuex.Store({
      strict: true,            //    strict: true, 若开启严格模式只要不经过 mutation的函数,则会报错
      state: {
        cartNum: 0,          // 购物车数量
      },
      mutations: {
        // 加1
        INCREMENT(state) {
          state.cartNum++;
        },
      }
    })

    index.vue:

    import baseStore from '../../../main.js';
    methods: {
          addCarts () {
                    baseStore.commit('INCREMENT')
         },     
    }

    异同点:
    1)共同点: 能够修改state里的变量,并且是响应式的(能触发视图更新)
    2)不同点:
    若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作,只要不经过

      mutation的函数,
    
      vue就会  throw error :    [vuex] Do not mutate vuex store state outside mutation handlers。

    action(像一个装饰器,包裹mutations,使之可以异步。) :

    action的功能和mutation是类似的,都是去变更store里的state,不过action和mutation有两点不同:
    1)action主要处理的是异步的操作,mutation必须同步执行,而action就不受这样的限制,也就是说action中我们既可以处理同步,也可以处理异步的操作

    2)action改变状态,最后是通过提交mutation

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        increment (context) {
          setInterval(function(){
            context.commit('increment')
          }, 1000)
        }
      }
    })
    注意:Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
    分发actions

    Action 通过 store.dispatch 方法触发:

    store.dispatch('increment')

    modules ( 模块化Vuex):

    背景:在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理。
    module:可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理

    const moduleA = {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
    
    const moduleB = {
      state: { ... },
      mutations: { ... },
      actions: { ... }
    }
    
    const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB
      }
    })
    
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态

    转载于:https://www.cnblogs.com/IT123/p/10904662.html

    展开全文
  • 深入了解vuex,vuex的五个核心属性

    千次阅读 2019-07-09 19:30:36
    vuex的五个核心属性? 五个核心概念:state、getters、actions、mutations、modules state state是vuex的基本数据 由于vuex状态存储是响应式的,所以vue组件从store中获取状态最简单的方法就是写在计算属性中...

    vuex是什么?

         专门为vue设计的状态管理架构,统一管理和维护vue的可变状态。

    vuex的五个核心属性?

         五个核心概念:state、getters、actions、mutations、modules

    state

        state是vuex的基本数据

       由于vuex状态存储是响应式的,所以vue组件从store中获取状态最简单的方法就是写在计算属性中

       通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到

    const Counter = {
      template: `<div>{{ count }}</div>`,
      computed: {
        count () {
          return this.$store.state.count
        }
      }
    }

    mapState辅助函数

    当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键。

    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import { mapState } from 'vuex'
    
    export default {
      // ...
      computed: mapState({
        // 箭头函数可使代码更简练
        count: state => state.count,
    
        // 传字符串参数 'count' 等同于 `state => state.count`
        countAlias: 'count',
    
        // 为了能够使用 `this` 获取局部状态,必须使用常规函数
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
    }
     
    //使用对象展开符
    ...mapState({
          topNav: state => state.topNav.data, //将 this.topNav 映射为  this.$store.topNav.data
          navigationInfo: state => state.topNav.navigationInfo
        }),

    Getters

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

           getters接收state作为其第一个参数,接受其他 getters 作为第二个参数,如不需要,第二个参数可以省略如下例子:

    const store = new Vuex.Store({
        state: {
            count:0
        },
        getters: {
            // 单个参数
            countDouble: function(state){
                return state.count * 2
            },
            // 两个参数
            countDoubleAndDouble: function(state, getters) {
                return getters.countDouble * 2
            }
        }
    })

    通过属性访问

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

    store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

    通过方法访问

    getters: {
      // ...
      getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
      }
    }
    //通过方法访问
    store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

    mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

    import { mapGetters } from 'vuex'
    
    export default {
      // ...
      computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
          'doneTodosCount',
          'anotherGetter',
          // ...
        ])
      }
    }
    
    mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })

    Mutation

     更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

    mutation必须是同步的,如果要异步需要使用action。

    每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。(提交荷载在大多数情况下应该是一个对象),提交荷载也可以省略的。

    const store = new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        //无提交荷载
        increment(state) {
            state.count++
        }
        //提交荷载
        incrementN(state, obj) {
          state.count += obj.n
        }
      }
    })
    
    //组件中调用
    //无提交荷载
    store.commit('increment')
    //提交荷载
    store.commit('incrementN', {
        n: 100
        })

    mapMutations 辅助函数

    import { mapMutations } from 'vuex'
    
    export default {
      //..
      methods: {
        ...mapMutations([
          'increment' // 映射 this.increment() 为 this.$store.commit('increment')
        ]),
        ...mapMutations({
          add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
        })
      }
    }
    

    Action

    Action 类似于 mutation,不同在于:

    • Action 提交的是 mutation,而不是直接变更状态。
    • Action 可以包含任意异步操作。
      const store = new Vuex.Store({
        state: {
          count: 0
        },
        mutations: {
          increment (state) {
            state.count++
          }
        },
        actions: {
          increment (context) {
            context.commit('increment')
          }
        }
      })

      注意:Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。

           Action 通过 store.dispatch 方法触发:

    store.dispatch('increment')

    mapActions辅助函数

    你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):

    import { mapActions } from 'vuex'
    
    export default {
      //..
      methods: {
        ...mapActions([
          'incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')
        ]),
        ...mapActions({
          add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')
        })
      }
    }

    Module 

    使用单一状态树,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。

    为了解决以上问题,Vuex 允许我们将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割: 

    import Vuex from 'vuex';
    import topNav_store from "./topNav/store.js";
    import member_store from "./member/store.js";
    import game_store from "./coupon/game.js";
    import approval from './approval/store.js'
    import setRentInfo from './contract/store.js'
    export default new Vuex.Store({
        modules:{
            topNav:topNav_store,
            memberStore:member_store,
            game_store:game_store,
            approval:approval,
            setRentInfo
        }
    })
    展开全文
  • vuex是什么? vuex官网 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,统一管理和维护vue的可变状态。...vuex的五个核心属性 五个核心概念:State、Getter、Action、Mutation、Module 一、State state...

    vuex是什么? vuex官网

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,统一管理和维护vue的可变状态。

    什么情况下应该使用vuex?

    1. 多组件共享状态 多个组件使用同一个数据
    2. 任何一个组件发生改变 其他的组件也要跟着发生相应的变化

    vuex的五个核心属性

    五个核心概念:State、Getter、Action、Mutation、Module

    一、State

    state是vuex的全局状态数据
    由于vuex状态存储是响应式的,所以vue组件从store中获取状态最简单的方法就是写在计算属性中

    通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到

    // 创建一个 Counter 组件
    const Counter = {
      template: `<div>{{ count }}</div>`,
      computed: {
        count () {
          return this.$store.state.count
        }
      }
    }
    

    mapState辅助函数

    当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键。

    // 在单独构建的版本中辅助函数为 Vuex.mapState
    import { mapState } from 'vuex'
    export default {
      computed: mapState({
        // 箭头函数可使代码更简练
        count: state => state.count,
        
        // 传字符串参数 'count' 等同于 `state => state.count`
        countAlias: 'count',
        
        // 为了能够使用 `this` 获取局部状态,必须使用常规函数
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
    }
    
    //使用对象展开运算符
    ...mapState({
          topNav: state => state.topNav.data, //将 this.topNav 映射为  this.$store.topNav.data
          navigationInfo: state => state.topNav.navigationInfo
        })
    

    二、Getter

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

    getters接收state作为其第一个参数,接受其他 getters 作为第二个参数,如不需要,第二个参数可以省略如下例子。

    
    const store = new Vuex.Store({
        state: {
            count:0
        },
        getters: {
            // 单个参数
            countDouble: function(state){
                return state.count * 2
            },
            // 两个参数
            countDoubleAndDouble: function(state, getters) {
                return getters.countDouble * 2
            }
        }
    })
    

    通过属性访问

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

    store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
    

    通过方法访问

    getters: {
      getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
      }
    }
    
    store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }
    

    注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。
    mapGetters 辅助函数
    mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

    import { mapGetters } from 'vuex'
     
    export default {
      // ...
      computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
          'doneTodosCount',
          'anotherGetter',
          // ...
        ])
      }
    }
    

    如何将一个 getter 属性另取一个名字?
    使用对象形式

    mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
    

    三、Mutation

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
    mutation必须是同步的,如果要异步需要使用action。
    每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。(提交荷载在大多数情况下应该是一个对象),提交荷载也可以省略的。

    const store = new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        //无提交荷载
        increment(state) {
            state.count++
        }
        //提交荷载
        incrementN(state, obj) {
          state.count += obj.n
        }
      }
    })
     
    //组件中调用
    //无提交荷载
    store.commit('increment')
    //提交荷载
    store.commit('incrementN', {
        n: 100
        })
    

    mapMutations 辅助函数

    import { mapMutations } from 'vuex'
     
    export default {
      //..
      methods: {
        ...mapMutations([
          'increment' // 映射 this.increment() 为 this.$store.commit('increment')
        ]),
        ...mapMutations({
          add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
        })
      }
    }
    

    四、Action
    Action 类似于 mutation,不同在于:
    Action 提交的是 mutation,而不是直接变更状态。
    Action 可以包含任意异步操作。

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        increment (context) {
          context.commit('increment')
        }
      }
    })
    

    mapActions辅助函数

    你在组件中使用 this.$store.dispatch(‘xxx’) 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):

    import { mapActions } from 'vuex'
     
    export default {
      //..
      methods: {
        ...mapActions([
          'incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')
        ]),
        ...mapActions({
          add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')
        })
      }
    }
    

    五、Module

    使用单一状态树,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。

    为了解决以上问题,Vuex 允许我们将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割:

    import Vuex from 'vuex';
    import topNav_store from "./topNav/store.js";
    import member_store from "./member/store.js";
    import game_store from "./coupon/game.js";
    import approval from './approval/store.js'
    import setRentInfo from './contract/store.js'
    export default new Vuex.Store({
        modules:{
            topNav:topNav_store,
            memberStore:member_store,
            game_store:game_store,
            approval:approval,
            setRentInfo
        }
    })
    
    
    展开全文
  • vuex的五个核心属性    state 、getters 、 actions 、 mutations、 modules 1. state  vuex的基本数据   vuex的状态存储是响应式的,用来存储变量 javascript state: { userId: '', name: '', token: '', ...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 206
精华内容 82
关键字:

vuex的五个核心属性

vue 订阅