解决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实现多维数组的方法
Nov 20 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
Vue2.0 事件的广播与接收(观察者模式)
Mar 14 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
Dec 12 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
VSCode launch.json配置详细教程
Jun 18 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
php过滤所有恶意字符(批量过滤post,get敏感数据)
2014/03/18 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
2015/05/08 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
Vue 自定义动态组件实例详解
2018/03/28 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
python实现将元祖转换成数组的方法
2015/05/04 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
python的turtle库使用详解
2019/05/10 Python
python实现五子棋小程序
2019/06/18 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
北美女性服装零售连锁店:maurices
2019/06/12 全球购物
ASOS西班牙官网:英国在线时尚和美容零售商
2020/01/10 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
设计专业自荐信
2014/06/19 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
地道战观后感500字
2015/06/04 职场文书
经典祝酒词大全
2015/08/12 职场文书
2015年教师节广播稿
2015/08/19 职场文书
python数字类型和占位符详情
2022/03/13 Python