写给新手同学的vuex快速上手指北小结

本文介绍了写给新手同学的vuex快速上手指北小结,分享给大家,具体如下

引入

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {...},
  mutations: {...},
  actions: {...}
})

export default store

//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
  store,...
})
...

//test.vue 使用时:
import {mapState,mapMutations} from 'vuex'

State篇

state更新实时渲染是基于==computed==这个计算属性的,直接赋给data只能赋值初始值,不会随着state改变实时渲染

<!--state改变不会实时渲染-->
export default {
  data() {
   return {
   name:this.$store.state.name,
   };
  },
}
<!--监听state改变重新渲染视图-->
<template>
  <div>
    {{name}}
  </div>
<template>
export default {
  computed: {
   name() {
   return this.$store.state.name;
   }
  },
}

注意: data中的变量如果和computed中的变量重名,data优先,注意命名

获取多个state值,写多个函数return,很繁琐,所以有==mapState==辅助函数

<!--取多个很冗余,繁琐-->
export default {
  computed: {
   token(){
   return this.$store.state.token;
   },
   name(){
   return this.$store.state.name;
   }
  },
}
<!--mapState 直接取出-->
import { mapState } from 'vuex'
export default {
  computed: mapState([
   'token',
   'name'
  ])
}

我们有局部计算,怎么和mapState一起用?

import { mapState } from 'vuex'
export default {
  computed:{
    getTime(){
      return 123;
    },
    ...mapState([
     'token',
     'name'
    ])
  }
}

我们为它起个别名

<template>
  <div>
    xiaokeai,dahuilang是我们取的别名
    token,name是state的值
    {{xiaokeai}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    computed:{
      ...mapState({
        xiaokeai:"token",
        dahuilang:"name",
      })
    }
  }
</script>

我们要state和data发生点什么

<template>
  <div>
    假如token的值123;
    balabala的值就是 123皮卡皮
    {{balabala}}
  </div>
<template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"皮卡皮卡"
      }
    }
    computed:{
      ...mapState({
        xiaokeai:"token",
        dahuilang:"name",
        // 为了能够使用 `this` 获取局部状态,使用一个自定义名字的函数
        balabala(state){
          return state.token + this.pikaqiu;
        }
      })
    }
  }
</script>

取个对象值怎么破?

<template>
 <div>
 {{daSon}}
 {{xiaoSon}}
 </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    data(){
      return {
        pikaqiu:"皮卡皮卡"
      }
    }
    computed:{
      ...mapState({
  daSon: state=>state.obj.yeye.baba.daSon,
  xiaoSon:state=>state.obj.yeye.baba.xiaoSon,
 })
    }
  }
</script>

这种方式取对象写到业务里不直观,也不共用,下节==Getter==有更优的方案

Getter篇

Getter是针对state的【对象】值提前做一些处理,以便用的时候直接提取

可以 this.$store.getters.xxx 使用,也可以使用mapGetters辅助函数,==辅助函数注意:== 和state一样,注入在computed中

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 obj: {
  yeye: {
  baba: {
   daSon: "老大",
   xiaoSon: "老二"
  }
  }
 }
 },
 getters: {
    <!--将想要提取或者处理的值这里处理好-->
 getson: state => {
  return state.obj.yeye.baba;
 }
 }
})

export default store

<!--用的时候,和state一样,也可以别名等等操作-->
<template>
 <div>
    {{getson}}
 </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
 computed: {
  ...mapGetters([
    getson
  ])
 }
}
</script>

Mutation篇

操作: this.$store.commit("名字","值");

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex的token",
 },
 mutations: {
 setToken(state, val) {
  state.token = val;
 }
 }
})

export default store

mapMutations 辅助函数,和state一样,可以别名, ==注意:== 辅助函数注入在methods中

 methods: {
  ...mapMutations([
   'setToken'
  ])
 }

 <!--使用-->
 this.setToken(100); //token修改为100

Mutation 必须是同步函数,不要误解这句话,以为异步不能用,异步可以用在里面,视图的渲染,取值都没有问题,问题在于:调试的时候,一些浏览器调试插件不能正确监听state。所以方便调试,尽量将异步写入action中

Action篇

注意action的 参数不是 state ,而是context,context里面包含commit,state。基本操作:this.$store.dispatch("函数名","值")

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

<!--辅助函数操作 注入在methods中-->
import { mapActions } from 'vuex'

export default {
 methods: {
  ...mapActions([
    "increment"
  ])
 }
}

<!--使用-->
this.increment(123);

module篇

module 目的将store按功能拆分成多个文件,利于维护管理,module 分为2种情况,1.是有命名空间, 2.是没有命名空间

没有命名空间: action、mutation 和 getter 是注册在全局的,所以要注意,方法函数不要设置同名了,如果同名了会都执行。
stete例外是局部。

import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from "./modules/cat.js";
Vue.use(Vuex);
const store = new Vuex.Store({
 state: {
 token: "vuex的token",
 },
 modules:{
 moduleA
 }
})

export default store;

<!--moduleA.js-->
export default {
 // namespaced: true,
 state: {
  cat:"我是cat",
 },
 mutations: {
 setCat(state, val) {
  state.cat = val;
 }
 },
 actions: { 

 },
 getters: { 

 }
};

无命名空间 取值

this.$store.state.moduleA.cat
或者
...mapState({
 cat:state=>state.moduleA.cat,
}),

不可以(state是局部,不可以这么取):
...mapState([
  "cat"
]),

无命名空间 改变值

和原来一样,因为方法是注册在全局的
this.$store.commit("setCat",666);
或者
...mapMutations([
 "setCat"
])

有命名空间: state, action、mutation 和 getter 是局部的,模块间命名互相不冲突,可以重名。
namespaced 设置为true,即可开启

<!--moduleA.js 文件-->
export default {
 namespaced: true,
 state: {
  cat:"我是cat",
 }
}

有命名空间取值

this.$store.state.moduleA.cat

或者
<!--注意这里:命名空间的名字带上,在modules注册时候呢个key值-->
<!--也可以别名,方法和之前一样,就是第一个参数是空间名-->
...mapState("moduleA",[
  "cat"
])

有命名空间 改变值

<!--只是第一个参数是空间名,其他操作一样-->
...mapMutations("moduleA",[
 "setCat"
])
this.setCat(888);

或者:

this.$store.commit("moduleA/setCat",666);

最后 plugins

vuex页面刷新会丢失数据,用vuex-persistedstate插件可解决

import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
 state: {},
 mutations: {},
 actions: {},
 getters: {},
 modules:{},
  plugins: [
    createPersistedState({
      storage: window.sessionStorage
    })
  ]
})

export default store

到此这篇关于写给新手同学的vuex快速上手指北小结的文章就介绍到这了,更多相关vuex快速上手内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 如何快速上手Vuex

    在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速.vue实现了Dom与viewModel双向绑定,使其视图的更新影响模型,模型的更新影响视图,你会不会觉得这就是Mvc库呢,实则不然,因为他还差一个重要的C(也就是控制器).以下是鄙人对Mvc的个人理解,如有失误还请各位道友指正. M:模型用于表示各种事物及事物特性的数据 v:view + viewModel,此处鄙人认为v不能单纯的理解为视图,而应该是视图+视图模型. c:控制器,用于协调M与v之

  • 写给新手同学的vuex快速上手指北小结

    本文介绍了写给新手同学的vuex快速上手指北小结,分享给大家,具体如下 引入 //store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: {...}, mutations: {...}, actions: {...} }) export default store //main.js ... import store from './sto

  • 用vbs将输出内容写到屏幕以覆盖当前屏幕上的内容的方法

    问: 您好,脚本专家!如何将输出内容写到屏幕以覆盖当前屏幕上的内容? -- KM 答: 您好,KM.如果您确实需要将输出内容写到命令窗口,那么,我们没办法给您提供答案:尽管我们多少已经处理过一些问题,但我们从未找到一种简单.直接的方法可覆盖命令窗口中的信息. 不过,如果您要将信息输出到 Internet Explorer 窗口,那么我们还确实有解决办法.而且马上就可以给出答案: Set objExplorer = CreateObject("InternetExplorer.Applicatio

  • JSP实现快速上传文件的方法

    本文实例讲述了JSP实现快速上传文件的方法.分享给大家供大家参考.具体如下: 这里演示JSP不使用第三方库,实现快速上传文件的功能 1. FileUpload.java: package FileUpload; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileOutputStream; import javax.servlet.ServletInputStream; /** * */ /*

  • Nacos心跳时间配置及服务快速上下线方式

    目录 Nacos心跳时间配置及服务快速上下线 1.修改微服务的nacos的心跳配置时间 2.修改spring cloud的gateway的ribbion配置 Nacos心跳机制 临时实例 持久化实例(永久实例) 各类型使用时机 总结 Nacos心跳时间配置及服务快速上下线 Nacos默认心跳时间是30秒,不太满足正式环境需要,需要调整心跳时间更短,让线上服务上下线能快速感知. 1.修改微服务的nacos的心跳配置时间 preserved.heart.beat.interval: 1000 #该实

  • Js+Ajax,Get和Post在使用上的区别小结

    get和post方法最大的不同在于: 1.get方法传值参数在url里面,而post参数放send里面 2.post方法必须加上 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 下面实例可以看get方法 xmlHttp.open("GET","for.php?text="+url,true); 在post里面表现为:

  • Vuex 快速入门(简单易懂)

    一.vuex介绍  (1)vuex是什么? 1. 借鉴 了Flux.Redux. The Elm Architecture 2. 专为 Vue.js 设计 的状态管理模式 3. 集中式存储和管理应用程序中所有组件的状态 4. Vuex 也集成到 Vue 的官方调试工具 5. 一个 Vuex 应用的核心是 store(仓库,一个容器),store包含着你的应用中大部分的状态 (state). (2)什么情况下我应该使用 Vuex? 1. 不适用:小型简单应用,用 Vuex 是繁琐冗余的,更适合使用

  • ASP.NET:把ashx写到类库里并在页面上调用的具体方法

    在类库中建Http Handler的操作很简单,就是添加一个普通的类,然后把之前ashx里的代码几乎一模一样贴到这个类中.但要注意命名空间和类名,因为之后我们会用 到.样例Handler: 复制代码 代码如下: namespace EdiBlog.Core.Web.HttpHandlers{    using System;    using System.Web; public class ExampleHandler : IHttpHandler    {        public boo

  • vuex实现及简略解析(小结)

    大家都知道vuex是vue的一个状态管理器,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.先看看vuex下面的工作流程图 通过官方文档提供的流程图我们知道,vuex的工作流程, 1.数据从state中渲染到页面: 2.在页面通过dispatch来触发action: 3.action通过调用commit,来触发mutation: 4.mutation来更改数据,数据变更之后会触发dep对象的notify,通知所有Watcher对象去修改对应视图(vue

  • 写给想学习Javascript的朋友一点学习经验小结

    当然只是个人的经验,有什么不对的也请高手见谅和指正. 关于到培训学校学习的忠告:别说现在没有这样的学校,就是有专门的学校也不要去,因为不会有好的老师的.不要浪费你自己(很可能是你父母)的钱和时间.趁早死了这个念头. 关于培训学校的这个我想我要比一般的朋友更有发言权,因为我本人干英语培训将近2年,我很清楚培训市场的情况,你很难碰到一个好的老师.英语可能还好些,毕竟英语说得好的老师还比较多,长期跟老外泡在一起,确实对口语能力的提高很显著,但是代价是很昂贵的.而你现在要学的是Javascript,呵呵

  • Windows 64 位 mysql 5.7以上版本包解压中没有data目录和my-default.ini及服务无法启动的快速解决办法(问题小结)

    LZ初学SQL,本来以为开源的安装很简单,但是中间出现了一些问题,记录下来,希望能帮助到他人. mysql官网下载地址:https://dev.mysql.com/downloads/mysql/点击打开链接 以5.7.20版本为例 首先安装包解压后,没有网上教程里面提到的data文件夹和my-default.ini,如下图所示 配置环境变量请参照网上教程,这个一般没有问题 主要注意以下几点: (1)my-default.ini文件存不存在不重要,关键需要自己在根目录下新建一个my.ini文件,

随机推荐