解决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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
JavaScript中的this,call,apply使用及区别详解
Jan 29 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 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
PHP提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
php数字游戏 计算24算法
2012/06/10 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
js返回顶部实例分享
2016/12/21 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
2019/04/04 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
Vue发布项目实例讲解
2019/07/17 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
简单介绍Python中的RSS处理
2015/04/13 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
python读取Kafka实例
2019/12/23 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Python实现粒子群算法的示例
2021/02/14 Python
matplotlib之多边形选区(PolygonSelector)的使用
2021/02/24 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
Why do we need Unit test
2013/01/03 面试题
超市开业庆典策划方案
2014/05/14 职场文书
2014客服代表实习自我鉴定
2014/09/18 职场文书
医院党建工作总结2015
2015/05/26 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
部门主管竞聘书
2015/09/15 职场文书