精华内容
下载资源
问答
  • state:vuex的基本数据,用来存储变量 geeter:从基本数据(state)派生的数据,相当于state的计算属性 mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每 mutation 都有一字符串的 ...
    1. state:vuex的基本数据,用来存储变量

    2. geeter:从基本数据(state)派生的数据,相当于state的计算属性

    3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

    回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。

    1. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。

    2. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。
      设置值
      import Vue from ‘vue’
      import Vuex from ‘vuex’

    Vue.use(Vuex)

    export default new Vuex.Store({
    state: {
    //存入数据
    ct: 0
    },
    mutations: {
    //修改数据,只有mutation能修改数据
    //state 是传的参数
    add (state) {
    state.ct++
    },
    addn (state, step) {
    state.ct += step
    },
    jian (state) {
    state.ct–
    },
    jiann (state, step) {
    state.ct -= step
    }
    },
    actions: {
    //action是通过mutation来修改数据的,
    是修改异步操作的
    // context 可以看成Store实例
    addasync (context) {
    setTimeout(() => {
    context.commit(‘add’)
    }, 2000)
    },
    addnasync (context, step) {
    setTimeout(() => {
    context.commit(‘addn’, step)
    }, 2000)
    },
    subacync (context) {
    setTimeout(() => {
    context.commit(‘jian’)
    }, 2000)
    }
    },
    getters: {
    //相当于计算属性,用于修改state形成新的数据,state修改getters会跟着一起修改,不会影响原来的state数据
    xinshu (state) {
    return 当前最新数据为${state.ct}
    }
    },
    modules: {
    }
    })
    使用
    1 使用点语法
    1this.store.state.2this.store.state.‘数据名’ 2 this.store.commit.‘mutation数据名’
    3this.store.dispatch.action4this.store.dispatch.‘action数据名’ 4this.store.state.‘getters数据名’
    只有commit 和 dispatch才能触发各自的属性修改数据
    2映射到计算属性或methods里面,再通过插值表达式引入即行
    先引入import { mapState’,mapMutations, mapActions, mapGetters } from 'vuex基本就是map加属性名
    然后隐射
    …mapState([‘数据名’])
    …mapMutations([‘mutation数据名’, ‘jiann’]),
    …mapActions([‘action数据名’]),
    …mapGetters([‘getters数据名’])
    同步操作和异步操作数据是在计算属性中进行映射
    下面是上面的代码的使用

    当前的值ct为:{{$store.state.ct}}

    传参就是在使用的时候在方法传参,同理,属性内页需要一个接受参数的变量

    展开全文
  • 什么是Vuex VueX 是一个专门为 Vue.js 应用设计的状态...Vue有五个核心概念,state, getters, mutations, actions, modules。 1. state state是Vuex的基本数据,用来存储变量 定义 export default new Vuex.Store({

    什么是Vuex

    VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(可以理解为 vue 组件里的某些 data )。
    它采用集中式存储管理应用的全部组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
    Vue有五个核心概念,state, getters, mutations, actions, modules。

    1. state

    state是Vuex的基本数据,用来存储变量
    定义

    export default new Vuex.Store({
      state: {
        count:1,
        students:[
          {id:110,name:"zhou",age:18},
          {id:111,name:"ti",age:25},
          {id:112,name:"qi",age:21},
          {id:113,name:"stu",age:19}
        ]
      }
      })
    

    调用

      //通过调用$store.state来输出需要的变量
      <h2>store的值:{{$store.state.count}}</h2>
      <h3 v-for="item in $store.state.students" :key="item.id">
         <h4>id:{{item.id}},姓名:{{item.name}},年龄:{{item.age}}</h4>
     </h3>
    

    2. getters

    从基本数据(state)派生的数据,相当于state的计算属性,在index.ts(js)中在getters模块中定义计算属性,在页面中通过$store.getters.计算属性名字进行调用
    定义

      getters:{
        //计算属性
        getMyName(state){
        //state参数是固定的,是指获取state的值
          return state.myName+"我是计算属性啊"
        },
        more20stu(state){
          return state.students.filter(s=>s.age>20)
        },
        moreAgeStu(state){
        //通过返回一个方法来接收页面传来的参数
          return function(age:any){
          //调用数组的新特性filter,filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
            return state.students.filter(s=>s.age>age)
          }
        }
      }
    

    调用

        <div>
          <h2>vue计算属性</h2>
          <h3>获取计算属性的getMyName的值:{{$store.getters.getMyName}}</h3>
          <h3>通过vuex的getters获取state的学生大于20岁的对象为:
            {{$store.getters.more20stu}}
          </h3>
          <h3>
            给计算属性传值需要返回一个方法接收:
            {{$store.getters.moreAgeStu(22)}}
          </h3>
        </div>
    

    3.mutations

    mutations是提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。在 mutations定义操作state变量,在页面展示的方法中通过this.$store.commit()调用mutations里的方法,进行操作state。
    定义

      mutations: {
        // this.$store.commit('increment')
        increment(state){
          state.count++;
        },
        incrementCount(state,count:any){
           state.count+=count;
        },
        decrement(state){
          state.count--;
        }
      }
    

    调用

    //在template中
        <h2>store的值:{{$store.state.count}}
          <h3 v-for="item in $store.state.students" :key="item.id">
              <h4>id:{{item.id}},姓名:{{item.name}},年龄:{{item.age}}</h4>
          </h3>
        <button @click="addtion">+</button>
        <button @click="subtion">-</button>
        <button @click="addCount(5)">+5</button>
        <button @click="addCount(10)">+10</button>
      </h2>
    //在<script lang="ts">中
    	  $store: any;
    	  addtion(){
    	    this.$store.commit('increment')
    	  }
    	  addCount(count:any){
    	  //'incrementCount需要请求mutations的方法名,count传递的参数
    	    this.$store.commit('incrementCount',count)
    	  }
    	  subtion(){
    	    this.$store.commit('decrement')
    	  }
    

    4.actions

    action 相似于 mutation,但是用来代替Mutation进行异步操作的函数
    定义

      actions: {
        updateName(context,payload){
          setTimeout(()=>{
            context.commit('updateNameInfo',payload)
          },1000)
        },
        promiseUpdateName(context,payload){
          return new Promise((resolve,reject)=>{
            setTimeout(()=>{
              context.commit('updateNameInfo',payload);
              resolve('成功修改');
            },1000)
          })
        }
      }
    

    调用

    //template
       <div>
         <h1>-----------------actions-------------</h1>
           <h2>(1)通过action修改name:{{$store.state.name}}
           <button @click="updateName">确定修改</button>
           <button @click="promiseUpdateName">promise回调修改</button>
         </h2>
       </div>
    //在<script lang="ts">中
    	updateName(){
    	 this.$store.dispatch('updateName','我是action');
    	}
    	promiseUpdateName(){
    	 this.$store.dispatch('promiseUpdateName','我是携带的信息')
    	 .then((res:any)=>{
    	   alert("action已经提交修改,并返回的参数为:"+res)
    	 });
    	}
    

    5.modules

    module:可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。在module模块中,五大属性(state,getters,mutations等等)用法差不多根store的五法属性用法差不多。区别就是换地方存储操作数据。方便管理
    定义

    const moduleA={
      state:{
        moduleName:"moduleA"
      },
      mutations:{
        updateModuleAName(state:any,payload:any){
           state.moduleName=payload;
        }
      },
      actions:{},
      getters:{
        fullName(state:any){
          return state.moduleName+",我是moduleA的计算属性"
        },
        fullName1(state:any,getters:any){
        //
          return "通过getters参数获取计算属性的值:"+getters.fullName
        },
        fullName2(state:any,getters:any,rootState:any){
          return "通过rootStare获取根state里的值:"+rootState.name;
        }
      }
    }
    const moduleB = {
     state: { ... },
     mutations: { ... },
     actions: { ... }
     }
     
    const store = new Vuex.Store({
     modules: {
      a: moduleA,
      b: moduleB})
    

    调用

    //template
       <div>
         <h1>-----------------modules-------------</h1>
           <h2>moduleName:{{$store.state.a.moduleName}}</h2>
           <button @click="updateModuleName">修改module名字</button>
           <h2>modules的计算属性1{{$store.getters.fullName1}}</h2>
           <h2>modules的计算属性2{{$store.getters.fullName2}}</h2>
       </div>
    //在<script lang="ts">中   
       updateModuleName(){
       this.$store.commit('updateModuleAName','moduleA被 修改了')
    }
    
    展开全文
  • VueX 是一个专门为 Vue.js 应用设计的...Vuex五个核心概念:state,getters,mutations,actions,modules。1. state:vuex的基本数据,用来存储变量2. geeter:从基本数据(state)派生的数据,相当于state的计算属性3...

    VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

    Vuex有五个核心概念:

    state, getters, mutations, actions, modules。

    1. state:vuex的基本数据,用来存储变量

    2. geeter:从基本数据(state)派生的数据,相当于state的计算属性

    3. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

    回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。

    4. action:和mutation的功能大致相同,不同之处在于 ==》1.Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。

    5. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

    Vuex的用法:

    新建vue项目testApp ==》 在testApp中建store文件 ==》 store文件下又有modules文件夹和getter.js 和 index.js ==》 store文件下建user.js

    在项目的main.js中引入import store from './store'

    在store文件下的index.js中引入

    import Vue from 'vue'

    import Vuex from 'vuex'

    import user from './modules/user'

    import global from './modules/global'

    import getters from './getters'

    Vue.use(Vuex)

    const store = new Vuex.Store({

    modules: {

    user

    },

    getters

    })

    export default store

    在store文件下的getters.js中引入

    const getters = {

    self: state => state.user.self,

    token: state => state.user.token,

    currentCommunity: (state, getters) => {

    let cid = getters.currentCommunityId

    return getters.communities.filter(item => {

    return item.communityId === cid

    })

    }

    }

    export default getters

    在modules文件下的user.js写代码

    const user = {

    state:{

    self: null,

    token: '',

    },

    mutations:{

    SET_SELF: (state, self) => {

    state.self = self

    },

    SET_TOKEN: (state, token) => {

    state.token = token

    }

    },

    actions:{

    login ({ commit }, res) {

    commit('SET_SELF', res.self)

    commit('SET_TOKEN', res.token

    }

    }

    export default user

    使用下面这两种方法存储数据:

    dispatch:异步操作,写法: this.$store.dispatch('mutations方法名',值)

    commit:同步操作,写法:this.$store.commit('mutations方法名',值)

    展开全文
  • Vuex五个核心概念本文参考自Vue文档,说的非常详细,建议看文档。Vuex是什么?VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。...

    Vuex的五个核心概念

    本文参考自Vue文档,说的非常详细,建议看文档。

    Vuex是什么?

    VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

    Vue有五个核心概念,state, getters, mutations, actions, modules。本文将对这个五个核心概念进行梳理。

    总结

    state => 基本数据

    getters => 从基本数据派生的数据

    mutations => 提交更改数据的方法,同步!

    actions => 像一个装饰器,包裹mutations,使之可以异步。

    modules => 模块化Vuex

    State

    state即Vuex中的基本数据!

    单一状态树

    Vuex使用单一状态树,即用一个对象就包含了全部的状态数据。state作为构造器选项,定义了所有我们需要的基本状态参数。

    在Vue组件中获得Vuex属性

    我们可以通过Vue的Computed获得Vuex的state,如下:

    const store = newVuex.Store({

    state: {

    count:0}

    })

    const app= newVue({//..

    store,

    computed: {

    count:function(){return this.$store.state.count

    }

    },//..

    })

    每当 store.state.count 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。

    mapState辅助函数

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

    //在单独构建的版本中辅助函数为 Vuex.mapState

    import { mapState } from 'vuex'exportdefault{//...

    computed: mapState({//箭头函数可使代码更简练

    count: state =>state.count,//传字符串参数 'count' 等同于 `state => state.count`

    countAlias: 'count',//为了能够使用 `this` 获取局部状态,必须使用常规函数

    countPlusLocalState (state) {return state.count + this.localCount

    }

    })

    }

    当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。

    computed: mapState([//映射 this.count 为 store.state.count

    'count'])

    对象展开运算符

    mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢?通常,我们需要使用一个工具函数将多个对象合并为一个,以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符,我们可以极大地简化写法:

    computed: {

    localComputed ()//本地计算属性

    //使用对象展开运算符将此对象混入到外部对象中

    ...mapState({//..

    })

    }

    对象运算符

    ... 展开运算符(spread operator)允许一个表达式在某处展开。展开运算符在多个参数(用于函数调用)或多个元素(用于数组字面量)或者多个变量(用于解构赋值)的地方可以使用。

    展开运算符不能用在对象当中,因为目前展开运算符只能在可遍历对象(iterables)可用。iterables的实现是依靠[Symbol.iterator]函数,而目前只有Array,Set,String内置[Symbol.iterator]方法,而Object尚未内置该方法,因此无法使用展开运算符。不过ES7草案当中已经加入了对象展开运算符特性。

    functiontest(a,b,c) {

    console.log(a);

    console.log(b);

    console.log(c);

    }var args = [0,1,2];

    test(...args);//0 1 2

    ES7草案中的对象展开运算符

    ES6中还不支持对对象的展开运算符,但是ES7中将支持。对象展开运算符符可以让我们更快捷地操作对象,如下例子:

    let {x,y,...z}={x:1,y:2,a:3,b:4};

    x;//1

    y; //2

    z; //{a:3,b:4}

    组件仍然保有局部状态

    使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试,但也会使代码变得冗长和不直观。

    如果有些状态严格属于单个组件,最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

    getters

    即从store的state中派生出的状态。

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

    const store = newVuex.Store({

    state: {

    count:0},

    getters: {//单个参数

    countDouble: function(state){return state.count * 2},//两个参数

    countDoubleAndDouble: function(state, getters) {return getters.countDouble * 2}

    }

    })

    与state一样,我们也可以通过Vue的Computed获得Vuex的getters。

    const app = newVue({//..

    store,

    computed: {

    count:function(){return this.$store.state.count

    },

    countDouble:function(){return this.$store.getters.countDouble

    },

    countDoubleAndDouble:function(){return this.$store.getters.countDoubleAndDouble

    }

    },//..

    })

    mapGetters 辅助函数

    mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性,与state类似

    import { mapGetters } from 'vuex'exportdefault{//...

    computed: {//使用对象展开运算符将 getters 混入 computed 对象中

    ...mapGetters(['countDouble','CountDoubleAndDouble',//..

    ])

    }

    }

    如果你想将一个 getter 属性另取一个名字,使用对象形式:

    mapGetters({//映射 this.double 为 store.getters.countDouble

    double: 'countDouble'})

    mutations

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

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

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

    const store = newVuex.Store({

    state: {

    count:1},

    mutations: {//无提交荷载

    increment(state) {

    state.count++}//提交荷载

    incrementN(state, obj) {

    state.count+=obj.n

    }

    }

    })

    你不能直接调用一个 mutation handler。这个选项更像是事件注册:“当触发一个类型为 increment 的 mutation 时,调用此函数。”要唤醒一个 mutation handler,你需要以相应的 type 调用 store.commit 方法:

    //无提交荷载

    store.commit('increment')//提交荷载

    store.commit('incrementN', {

    n:100})

    对象风格的提交方式

    我们也可以使用这样包含 type 属性的对象的提交方式。

    store.commit({

    type:'incrementN',

    n:10})

    Mutations 需遵守 Vue 的响应规则

    最好提前在你的 store 中初始化好所有所需属性。

    当需要在对象上添加新属性时,你应该

    使用 Vue.set(obj, 'newProp', 123), 或者

    以新对象替换老对象。例如,利用对象展开运算符我们可以这样写state.obj = {...state.obj, newProp: 123 }

    mapMutations 辅助函数

    与其他辅助函数类似,你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。

    import { mapMutations } from 'vuex'exportdefault{//..

    methods: {

    ...mapMutations(['increment' //映射 this.increment() 为 this.$store.commit('increment')

    ]),

    ...mapMutations({

    add:'increment' //映射 this.add() 为 this.$store.commit('increment')

    })

    }

    }

    actions

    Action 类似于 mutation,不同在于:

    Action 提交的是 mutation,而不是直接变更状态。

    Action 可以包含任意异步操作。

    我们用如下例子来结束actions:

    const store = newVuex.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')

    其他与mutations类似的地方

    Actions 支持同样的载荷方式和对象方式进行分发:

    //以载荷形式分发

    store.dispatch('incrementN', {

    n:10})//以对象形式分发

    store.dispatch({

    type:'incrementN',

    n:10})

    mapActions辅助函数

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

    import { mapActions } from 'vuex'exportdefault{//..

    methods: {

    ...mapActions(['incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')

    ]),

    ...mapActions({

    add:'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')

    })

    }

    }

    Modules

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

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

    const moduleA ={

    state: { ... },

    mutations: { ... },

    actions: { ... },

    getters: { ... }

    }

    const moduleB={

    state: { ... },

    mutations: { ... },

    actions: { ... }

    }

    const store= newVuex.Store({

    modules: {

    a: moduleA,

    b: moduleB

    }

    })

    store.state.a//-> moduleA 的状态

    store.state.b //-> moduleB 的状态

    模块的局部状态

    对于模块内部的 mutation 和 getter,接收的第一个参数是模块的局部状态,对于模块内部的 getter,根节点状态会作为第三个参数:

    const moduleA ={

    state: { count:0},

    mutations: {

    increment (state) {//state 模块的局部状态

    state.count++}

    },

    getters: {

    doubleCount (state) {return state.count * 2},

    sumWithRootCount (state, getters, rootState) {return state.count +rootState.count

    }

    }

    }

    同样,对于模块内部的 action,context.state 是局部状态,根节点的状态是 context.rootState:

    const moduleA ={//...

    actions: {

    incrementIfOddOnRootSum (context) {if ((context.state.count + context.rootState.count) % 2 === 1) {

    commit('increment')

    }

    }

    }

    }

    展开全文
  • Vuex五个核心属性

    2020-10-22 19:05:15
    五个属性一、Vuex正常条件下1、state2、getters3、mutations4、actions二、Vuex切割成多个模块情况下1、获取模块里state数据语法2、获取模块里getters方法的语法3、调用模块里mutations方法的语法4、调用模块里...
  • state:state即Vuex中的基本数据!state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中...getters(相当于State的计算属性) :1基础用法:main.js:const store = new Vuex....
  • vuex辅助函数和vuex5个属性 Vuex是什么?? VueX 是一个专门为 Vue.js 应用设计的状态管理架构 主要有五个核心概念,state, getters, mutations, actions, modules。 state 保存全局状态的 getters 允许组件从state...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 419
精华内容 167
关键字:

vuex五个属性

vue 订阅