解决vuex刷新状态初始化的方法实现


Posted in Javascript onAugust 15, 2019

vuex五种基本对象

  • state:存储状态(变量)
  • getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用$sotre.getters.fun()
  • mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
  • actions:异步操作。在组件中使用是$store.dispath('')
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。
npm install vuex -S // 安装vuex

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import temp from '@/store/modules/temp'

Vue.use( Vuex ); // 挂载在vue

const store = new Vuex.Store({
  modules: {
    temp,
  }, state: {

  }, getters: {

  }, mutations: {

  },
});

export default store; // 抛出

src/store/modules/temp.js

const Storage = sessionStorage
const tempInfo = {
  state: { // 设置全局访问的state对象
    tempData: Storage['SET_TEMP_DATA'] ? JSON.parse(Storage['SET_TEMP_DATA']) : {}, // 设置初始化的值(Storage中是否存在,存在则获取,不存在则默认赋值{})
  }, mutations: { // 自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
    SET_TEMP_DATA(state, tempData) {
      state.tempData = tempData
    },
  }, actions: {
    SetData({ commit }, tempData) {
      commit('SET_TEMP_DATA', tempData); // 同步操作
      Storage.setItem('SET_TEMP_DATA', JSON.stringify(tempData))
    }
  }, getters: { // 实时监听state值得变化(最新状态)
    tempData: (state) => {
      return state.tempData
    }
  }
}
export default tempInfo;

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store/index' //vuex 状态管理

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, // 使用store
 components: { App },
 template: '<App/>'
})

src/index.vue

<template>
 <div class="move-forward">
   <div @click="click">点击改变vuex值</div>
</template>
<script>
  export default {
    methods: {
      click() {
        let aa = this.$store.getters.tempData.aaa*1
        this.$store.dispatch('SetData', {"aaa": aa += 1})
      },
    }
  }
</script>

其他

当然还可以使用vuex-persistedstate、vuex-along等这些第三方插件。

npm i -S vuex-persistedstate或npm i -S vuex-along
import Vue from 'vue'
import Vuex from 'vuex'
import temp from '@/store/modules/temp'
import createPersistedSatte from 'vuex-persistedstate' // 引入

Vue.use( Vuex );

const store = new Vuex.Store({
  modules: {
    temp,
  }, state: {

  }, getters: {

  }, mutations: {

  },
  plugins: [createPersistedSatte()], // 挂载插件
});

export default store

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(十一) 正则表达式介绍
Jun 20 Javascript
JS判断当前日期是否大于某个日期的实现代码
Sep 02 Javascript
javascript强制点击广告的方法
Feb 06 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
Apr 22 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 #Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 #Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 #Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 #Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 #Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
Aug 15 #Javascript
js设计模式之单例模式原理与用法详解
Aug 15 #Javascript
You might like
实现分十页分向前十页向后十页的处理
2006/10/09 PHP
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
调整PHP的性能
2013/10/30 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
PHP实现微信发红包程序
2015/08/24 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
jquery动态加载js三种方法实例
2013/08/03 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
JavaScript 事件对象介绍
2015/04/13 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
Vue项目History模式404问题解决方法
2018/10/31 Javascript
JavaScript变量提升和严格模式实例分析
2019/01/27 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
详解Python验证码识别
2016/01/25 Python
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
pandas重新生成索引的方法
2018/11/06 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
材料采购员岗位职责
2013/12/17 职场文书
大学生实习感言
2014/01/16 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
监察建议书范文
2014/03/12 职场文书
竞聘上岗演讲
2014/05/19 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
MySQL连接控制插件介绍
2021/09/25 MySQL
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python