您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

介绍vuex

vuex是一个仓库,是vue的状态管理工具,存放公共数据,任何组件都可以使用vuex里的公共数据 vuex是vue的状态管理工具 状态指的就是数据

1、state - 存放Vuex store实例的状态对象,用于定义共享的数据。

2、Action - 动作,向store发出调用通知,执行异步操作

3、Mutations - 修改器,它只用于修改state中定义的状态变量。

4、getter - 读取器,外部程序通过它获取变量的具体值,或者在取值前做一些计算(可以认为是store的计算属性)

5、modules - 对state进行分类处理

使用场景: 当有多个组件共享数据时,如果需要构建是一个中大型单页应用,会考虑如何更好地在组件外部管理状态,就使用Vuex 。

首先下载vuex
我们的根目录下创建一个store文件夹,在这个里面创建一个state.js文件。
在这个js文件中创建我们的vuex。
首先引入vue,之后引入我们的vuex。
使用vue.use(vuex)方法
直接导出 new vuex.Store() 实例构造器
我们在这个方法中定义状态和方法。
之后在我们根目录下的min.js中引入,并挂载到原型上即可。
创建实例

import Vue from 'vue'
// 引入 vue
import Vuex from 'vuex'
// 引入vuex
Vue.use(Vuex)
export default new Vuex.Store({
    // 导出一个vuex实例
    state: {
        // 状态
        msg:"没改变"
    },
    mutations: {
        // 同于修改状态
        btn(state,data){
        // state 我们的状态对象,这里没有this,想要修改状态必须通过mutations。
        // data 调用这个方法的时候,可以传递过来参数。注意:只能传递一个参数。
        state.msg="改变了"
        }
    },
    actions: {
        // 异步触发mutations
    },
    getter: {
        // 类似于计算属性
 
    }
})
在全局中引入

import Vue from 'vue'
import App from './App'
import store from './store/index.js';
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App,
    store
    // 挂载到vue实例上
})
app.$mount("#app")
使用

this.$store.state.变量名
// 读取数据
this.$store.commit("方法名",数据);
// 触发我们mutations中的方法,可以传递参数,也可以不传递。
this.$store.dispath("事件名",参数);
// 触发我们的ctions中的异步方法,在通过mutations触发我们的同步方法修改state
this.$store.getters.fun()
// 调用我们getters中的属性
 

高级用法—辅助函数(语法糖)

语法糖,辅助函数:mapstate,mapActions,mapMutations,mapGetters
当一个组件需要多个状态时这些状态,这些状态都声明成计算属性过于冗长,于是就有了辅助函数
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
    
    computed:{
         ...mapState({
        a:"a",   //  "a" 指的是state中的a
        b:"b"
        }),
         ...mapGetters({
        Val:'newVal' // 可以重新命名
         })
    }        
    
    methods:{
        ...mapActions({
        getSync:'getSyncNum'
    })
 
    ...mapMutations({
        increament:"increament"
        })
    }
    // 使用时
 
    template
 
    {{a}}  {{b}}
 
    {{getSync(1)}}
 
    <button @click='increament(1)'></button>
 
vuex数据持久化
安装
npm install vuex-persistedstate
在store.js里
import createPersistedState from 'vuex-persistedstate'
const state = {
    user:{},
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
});
可以看到,引用的时候有一个storage: window.sessionStorage,说明会把数据存储到localStorage中

可配置项

key: storage名称,所有的数据会存储到一个key里面,默认:vuex
storage: 数据存储位置,默认:localStorage

3 . 组件中获取
vuex里面存放的数据,页面一经刷新会丢失:
解决办法: 存放在localStorage或者sessionStorage里面,进入页面时判断是否丢失,丢失再去localStorage或者sessionStorage里面取;
在app.vue根组件的created里面判断是否丢失,在进行上面的操作;
created(){ if(localStorage.vuex){ this.list=JSON.parse(localStorage.vuex) } },

vuex-persistedstate 使用浏览器的本地存储( local storage )对状态( state )进行持久化。这意味着刷新页面或关闭标签页都不会删除你的数据。

一个很好的例子就是购物车:如果用户不小心关闭了一个标签,他们可以重新打开并回到之前页面的状态。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进