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


Posted in Javascript onApril 14, 2020

本文介绍了写给新手同学的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快速上手内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
深入探讨JavaScript的最基本部分之执行上下文
Feb 12 Javascript
React路由鉴权的实现方法
Sep 05 Javascript
javascript canvas检测小球碰撞
Apr 17 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
vue-cli设置publicPath小记
Apr 14 #Javascript
vue 实现用户登录方式的切换功能
Apr 14 #Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 #Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 #Javascript
编写一个javascript元循环求值器的方法
Apr 14 #Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 #Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
PHP动态变静态原理
2006/11/25 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
JS判断数组中是否有重复值得三种实用方法
2013/08/16 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
2014/01/24 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
java必学必会之static关键字
2015/12/03 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python Django框架实现自定义表单提交
2016/03/25 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python制作exe文件简单流程
2019/01/24 Python
如何基于python操作excel并获取内容
2019/12/24 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
职务聘任书范文
2014/03/29 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书