精华内容
下载资源
问答
  • vuex核心特性 vuex 的持久化插件的使用 vuex-persist插件 vuex的基本概念 vuex的基本概念 vuex是在vue中的全局状态管理工具,可在任意组件中访问vuex中定义的数据,达到数据全局共享 vuex与组件通信相比较 ...

    目录

    1. vuex 的基本概念
    2. vuex 的基本使用
    3. vuex 的核心特性
    4. vuex 的持久化插件的使用 vuex-persist插件

    vuex的基本概念

    • vuex的基本概念
      vuex是在vue中的全局状态管理工具,可在任意组件中访问vuex中定义的数据,达到数据全局共享

    • vuex与组件通信相比较

    1. 组件通信的流程相对来说复杂一下
    2. 组件通信是不同的路由无法完成数据的通信,vuex全局有效的

    vuex的安装和基本使用

    • 安装和配置步骤
    //vuex的安装
    cnpm install  vuex --save
    
    //配置vuex
    //如果是vue3 默认可以手动选择安装vuex  src/store.js文件夹中
    //参考代码
    import Vue from 'vue'  //导入vue对象
    import Vuex from 'vuex' //导入vuex
    Vue.use(Vuex)  //Vue对象使用vuex的的对象
    
    //抛出vuex的存储对象
    export default new Vuex.Store({
       //vuex中存储数据的,
      state: {
    
      },
      mutations: {
    
      },
      actions: {
      }
    })
    
    • 在main.js中进行配置
    import store from './store'//导入vuex配置
    
    new Vue({
      router,
      store,//挂载到vuex的实例化对象上去.
      render: h => h(App)
    }).$mount('#app')
    
    

    基本使用方法流程

    //路由使用  this.$router  
    //vuex怎么使用  this.$store  指的是整个vuex的对象
    this.$store.state  获取state对象中的数据
    
    //修改vuex中state中的数据
    this.$store.commit("mutations方法",要传递的数据)
    
    • index.vue
    incr(){
          console.log("我是改变数据commit第一部")
          //commit("mutations方法名",额外参数)
          this.$store.commit("changeNum",3);
        }
    
    • store.js中,接受调用的方法
    //mutations接受组件传递过来的数据
    mutations: {
        changeNum(state,payload){
          console.log("我是改变数据commit第二部")
          state.num += payload;//修改数据的操作
        }
     },
    

    vuex运行机制
    在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutations中的方法,在mutations中可以直接操作state中的数据,state的数据只要一发生改变立马响应到组件中

    vuex的五大核心特性

    • 1.state 存储vuex所有的数据,类似于vue中data数据
    //1. state  存储vuex所有的数据,类似于vue中data数据
    state:{
        num:1,
        list: [],
    }
    
    • 2.mutations 方法对象,同步修改state中的数据 类似于Vue中methods
    mutations:{
        changeNum(state,payload){
            state.num = payload;//修改state中的数据
        }
    }
    
    //组件中调用mutations中的方法
    this.$store.commit("changeNum", 10);
    
    • 3.actions vuex中用来异步修改state中的数据,他调用mutations中的方法
    actions:{
        //context执行上下文
        changeNums(context,payload){
            
           	//间接调用mutations方法
            context.commit("changeNum", payload);
        }
    }
    
    //actions如何进行调用呢?通过dispatch方法进行调用的
    this.$store.dispatch('changeNums',10);
    
    • 4.getters对象 用来对vuex中数据进行逻辑运算,类似于vue中计算属性
    getters:{
        totals(){
            return 100;
        }
    }
    //组件中调用 getters属性调用
    {{this.$store.getters.totals}}
    
    • 5.moudules对象 模块化,就是把vuex分为多个模块
    //导入模块
    import m1 from "./m1.js";
    modules:{
        m1, m2
    }
    
    • vuex的实现原理
      修改state中的数据,第一步在组件中通过 this.$store.dispatch()方法来调用actions中的数据方法,在actions中通过执行上下文context.commit()方法来执行mutations中的方法,进而修改state中的数据,然后同步更新到组件上去。

    vuex的持久化插件的使用 vuex-persist插件

    • 安装插件
    cnpm install --save vuex-persist
    
    • 配置vuex的持久化
    //1.导入插件
    import VuexPersistence from 'vuex-persist'
    //2. 创建对象进行配置
    const vuexLocal = new VuexPersistence({
        storage: window.localStorage,//配置存储介质,默认持久化到本地存储中
    })
    
    //3. 引入插件
    const store = new Vuex.Store({
      state: { ... },
      mutations: { ... },
      actions: { ... },
      plugins: [vuexLocal.plugin],//引入插件
    }) 
    
    展开全文
  • import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ // 在state中定义我们需要共享的数据 // 常见的JS数据类型都是支持的 state: { num: 100, age: 29, info: { name: '

    state提供唯一的公共数据源,所有共享的数据都要统一放到store中的state属性中存储

    定义state

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      // 在state中定义我们需要共享的数据
      // 常见的JS数据类型都是支持的
      state: {
        num: 100,
        age: 29,
        info: {
          name: 'cp',
          height: 180
        }
      },
      mutations: {
      },
      actions: {
      },
      modules: {
      }
    })
    
    

    在组件中使用state

    方法一:通过$store对象使用 ---$store.state.xxx

    <template>
        <div>
            storeComponents
            通过$store方式去使用{{$store.state.num}}
            {{$store.state.age}}
            {{$store.state.info.name}}
        </div>
    </template>
    

    在一般配置项中使用 this.$store.state.xxx

    <script>
    export default {
      name: 'store',
      mounted () {
        console.log(this.$store.state.age)
        console.log(this.$store.state.info.name)
      }
    }
    </script>
    
    

    方法一使用总结
    组件通过$store对象使用VueX中的数据
    1.模板中 s t o r e . s t a t e . 要 使 用 的 属 性 名 称 2. 在 配 置 项 中 t h i s . store.state.要使用的属性名称 2.在配置项中 this. store.state.使2.this.store.state.要使用的属性名称(mouted等钩子函数)


    方法二:通过mapState映射使用

    导入组件
    <template>
        <div>
            Map
        </div>
    </template>
    
    <script>
    export default {
      name: 'MapComponents'
    }
    </script>
    
    <script>
    // 第一步:引入mapstate函数  来自于vuex
    import { mapState } from 'vuex'
    export default {
      name: 'MapComponents',
      // 第二步 在计算属性中调用mapstate函数 把想要使用的state中的数据映射过来即可
      // ...mapState(['vuexstate中的属性1','vuexstate中的属性2'])
      // 属性的名称会被当成同名的计算属性
      // 直接当成一般的计算属性使用就可以了
      // 相当于在计算属性中形成了这样的关系  num => state.num  age=>state.age
      computed: {
        ...mapState(['num', 'age', 'info'])
      },
      mounted () {
        console.log(this.info)
      }
    }
    </script>
    

    使用方式总结:什么时候选择什么样的方法来使用数据呢?

    如果知识想使用state中的一个数据直接通过$store.state.xxx的方式使用 如果我在一个组件中想要使用的数据很多,那通过mapState的方式一次性把所有的属性都映射为计算属性
    展开全文
  • 一、Vuex概述 ...三、Vuex中的核心特性 1、State:用于提供唯一的公共数据源,所有共享的数据都要放到Store中的state中存储。 在组件中访问state的方式有两种: a、使用this.$ store.state.全局数据名称,

    一、Vuex概述

    vuex是实现组件全局数据管理的一种机制,可以方便组件之间的数据共享。

    二、vuex的作用

    1、能够在vuex中集中管理共享的数据,便于开发和后期进行维护
    2、能够高效实现组件之间的数据共享
    3、存储在vuex中的数据是响应式的,当数据发生改变,页面中的数据也会同步更新

    三、Vuex中的核心特性

    1、State:用于提供唯一的公共数据源,所有共享的数据都要放到Store中的state中存储。
    在组件中访问state的方式有两种:

    1. 用this.$ store.state.全局数据名称,如this.$store.state.num
    2. 先在组件中按需导入mapState函数,如import { mapState } from
      ‘vuex’,然后将数据映射为计算属性,computed: { …mapState([‘全局数据名称’]) }

    2、Mutation:用于变更 $store 中的数据,注意,在mutation中不能写异步代码。
    使用方式也有两种:

    1. 首先打开store下的js文件,在mutations中添加如下代码:
    mutations: {
    	//第一个形参永远都是state也就是$state对象
        //第二个形参是调用add时传递的参数
        add(state,step){
        	// 可对state中的数据进行修改
            state.count+=step;
        }
      }
    

    然后在Add.vue组件中给按钮添加事件,this.$store.commit() 调用函数,使用代码如下:

    <button @click="Add">+n</button>
    
    methods:{
      Add(){
        //使用commit函数调用mutations中的对应函数,
        //第一个参数就是我们要调用的mutations中的函数名
        //第二个参数就是传递给add函数的参数
        this.$store.commit('add',10)
      }
    }
    
    1. 第二种方式,首先在组件中按需导入mapMutations,即import { mapMutations } from
      ‘vuex’,然后将其映射为methods中的方法,即methods:{ …mapMutations([‘add’])
      },然后可直接在按钮中绑定此方法。如<button @click=“add”>+1 </ button>

    3、actions:由于在mutations中不能编写异步代码,会导致vue调试器报错,所以可以在actions中来执行异步操作。
    操作步骤有两种方式:

    1. 打开store下的js文件,修改actions,如下:
    actions: {
      addAsync(context,step){
        setTimeout(()=>{
          context.commit('add',step);
        },1000)
      }
    }
    

    然后在Add.vue组件中给按钮添加事件,使用 this.$store.dispatch() 将调用函数并传参,代码如下:

    <button @click="AddAsync">+1</button>
    
    methods:{
      AddAsync(){
        this.$store.dispatch('addAsync',5)
      }
    }
    
    1. 第二种方式,先在组件中按需导入import { mapActions } from
      ‘vuex’,然后映射到methods方法中,即methods:{ …mapMutations([‘subAsync’])
      }获得mapMutations映射的subAsync函数,然后可直接在按钮中绑定此方法。<button
      @click=“subAsync”>异步-1 </ button>

    4、getters:用于对 store中的数据进行加工处理形成新的数据,它只用于包装数据,不会修改store中的原数据。
    使用方式如下:

    1. 打开store下的js文件,添加getters
    export default new Vuex.Store({
      .......
      getters:{
        //添加了一个showNum的属性
        showNum : state =>{
          return '最新的count值为:'+state.count;
        }
      }
    })
    

    然后打开Addition.vue中,添加插值表达式使用getters

    <h3>{{$store.getters.showNum}}</h3>
    
    1. 也可以在Addition.vue中,导入mapGetters,并将之映射为计算属性
    import { mapGetters } from 'vuex'
    computed:{
      ...mapGetters(['showNum'])
    }
    

    四 mutation和action的区别?

    1. 流程顺序区别:流程可拆分为两部分——“对应视图 -----> 修改State”,所以流程为 视图触发action,action触发mutation。
    2. 功能区别:mutation主要用于修改state中的数据,理论上是修改state的唯一途径。而action用于处理异步任务,通过异步操作变更数据。
    3. 二者有不同的限制:mutation必须同步执行,action可以异步,但不能直接操作state,可获取数据后调用mutation提交最终数据。
    展开全文
  • vuex核心特性 1、vuex概述 什么是vuex vuex是实现全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享 vuex管理数据的优点 1、能够在vuex中集中管理共享的数据,便于开发和后期的维护 2、能够高效...

    知识点:

    vuex概述
    vuex的基本使用
    vuex的核心特性

    1、vuex概述

    什么是vuex

    vuex是实现全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享

    vuex管理数据的优点

    1、能够在vuex中集中管理共享的数据,便于开发和后期的维护

    2、能够高效的实现组件之间的数据共享,提高开发效率

    3、存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新

    2、vuex的基本使用步骤

    1、 安装

    安装npm i vuex --save

    2、在src文件目录下新建store>index.js文件

    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    const store = new Vuex.Store();
    export default store;
    

    3、人口文件里面引入store 然后再全局注入

    import store from './store'//引入store
    new Vue({
     el: '#app',
     router,
     store,//使用store
     template: '<App/>',
     components: { App }
    })
    

    4、使用

    1.在state中定义数据

    Vue.use(Vuex)
    const store = new Vuex.Store({
      state:{
        count:1
      }
    })
    

    2、Getter相当于vue中的computed计算属性,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,Getters 可以用于监听、state中的值的变化,返回计算后的结果

    getters:{
        getCount:state=>{
          return state.count+1
        }
    

    3、给action注册事件处理函数,当这个函数被触发时候,将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参

    actions:{
              addFun(context,n){
              context.commit('add',n)
           }removeFun(context){
             context.commit("remove")
           }
        }
    

    4、mutations是一个对象里。面的方法 都是同步事务,是更改state初始状态的唯一合法方法,具体的用法就是给里面的方法传入参数state或额外的参数

     mutations:{
        add(state,n){
        state.count = state.count+n
      },
      remove(){
        state.count=state.count-1
      }
      },
    

    dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch(‘action方法名’,值)

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

    export defult{
      data(){
        return{
          mag:'aaa'
        }
      },
        methods:{
          addCount(){
            this.$store.commit('add')
          },
            reoveCount:function(){
              this.$store.commit('remove')
            },
             addFun(){
                let n =2;
               this.$store.dispatch('addFun',n)
              },
                removeFun(){
                   this.$store.dispatch('removeFun')
                }
        }
    }
    

    3、vuex中的核心特性

    state

    state提供唯一的公共数据源,所有共享的数据都要统一放到store中的state中存储
    在组件中访问state的方式:

    1、 .this. s t o r e . s t a t e . 全 局 数 据 名 称 如 : t h i s . store.state.全局数据名称 如:this. store.state.this.store.state.count
    2、先按需导入mapState函数: import { mapState } from ‘vuex’
    然后数据映射为计算属性: computed:{ …mapState([‘全局数据名称’])

    mutation

    Mutation用于修改变更$store中的数据
    使用方式第一种:

    1、打开store.js文件,在mutations中添加代码如下
    mutations: { add(state,step){ //第一个形参永远都是state也就是$state对象 //第二个形参是调用add时传递的参数 state.count+=step; } }
    2、然后在Addition.vue中给按钮添加事件代码如下:

    <button @click="Add">+1</button>
    
    methods:{
      Add(){
        //使用commit函数调用mutations中的对应函数,
        //第一个参数就是我们要调用的mutations中的函数名
        //第二个参数就是传递给add函数的参数
        this.$store.commit('add',10)
      }
    }
    import { mapState,mapMutations } from 'vuex'
    
    export default {
      data() {
        return {}
      },
      methods:{
          //获得mapMutations映射的sub函数
          ...mapMutations(['sub']),
          //当点击按钮时触发Sub函数
          Sub(){
              //调用sub函数完成对数据的操作
              this.sub(10);
          }
      },
      computed:{
          ...mapState(['count'])
          
      }
    }
    

    使用mutations的第二种方式:

    import { mapMutations } from 'vuex'
    
    methods:{
      ...mapMutations(['add'])
    }
    

    action

    在mutations中不能编写异步的代码,会导致vue调试器的显示出错。
    在vuex中我们可以使用Action来执行异步操作。

    操作步骤如下:
    打开store.js文件,修改Action,如下:
    actions: {
    addAsync(context,step){
    setTimeout(()=>{
    context.commit(‘add’,step);
    },2000)
    }
    }
    然后在Addition.vue中给按钮添加事件代码如下
    <button @click=“AddAsync”>…+1
    methods:{
    AddAsync(){
    this.$store.dispatch(‘addAsync’,5)
    }
    }

    第二种方式

    import { mapActions } from ‘vuex’

    methods:{
    …mapMutations([‘subAsync’])
    }

    如下:
    import { mapState,mapMutations,mapActions } from ‘vuex’

    export default {
    data() {
    return {}
    },
    methods:{
    //获得mapMutations映射的sub函数
    …mapMutations([‘sub’]),
    //当点击按钮时触发Sub函数
    Sub(){
    //调用sub函数完成对数据的操作
    this.sub(10);
    },
    //获得mapActions映射的addAsync函数
    …mapActions([‘subAsync’]),
    asyncSub(){
    this.subAsync(5);
    }
    },
    computed:{
    …mapState([‘count’])

    }
    }

    getter

    Getter用于对Store中的数据进行加工处理形成新的数据
    它只会包装Store中保存的数据,并不会修改Store中保存的数据,当Store中的数据发生变化时,Getter生成的内容也会随之变化

    打开store.js文件,添加getters,如下:

    export default new Vuex.Store({

    getters:{
    //添加了一个showNum的属性
    showNum : state =>{
    return ‘最新的count值为:’+state.count;
    }
    }
    })

    然后打开Addition.vue中,添加插值表达式使用getters

    或者也可以在Addition.vue中,导入mapGetters,并将之映射为计算属性
    import { mapGetters } from ‘vuex’
    computed:{
    …mapGetters([‘showNum’])
    }

    展开全文
  • 1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享 使用Vuex管理数据的好处: A.能够在vuex中集中管理共享的数据,...
  • Vuex概念和作用解析1.1Vuex概念1.2 作用解析2.单界面到多界面状态管理切换2.1 单界面状态管理切换2.2 Vuex的安装以及使用 1. Vuex概念和作用解析 1.1Vuex概念 官方解释:Vuex是一个专为Vue.js应用程序开发的状态...
  • vuex五大特性

    2020-12-05 10:55:54
    2、vuex 的五个核心概念 State 定义状态(变量) state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新 Getter 获取状态(变量的值) A、getters ...
  • vueX核心的概念

    2021-05-22 19:28:02
    vuex核心概念 vuex核心概念有五种分别是 1.State 2.Getters 3.Mutation 4.Action 5.Module State特性 1.就是一个仓库,仓库里面放了很多对象。 2.state里面存放的数据是响应式的,Vue组件从store中读取数据,...

空空如也

空空如也

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

vuex的核心特性

vue 订阅