【Vuex概念 + Vuex基本操作 + 持久化插件的使用】

2023-11-15 21:23:22

一、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它分为五部分组成： state、actions、mutations、modules、getters

state 存放数据
actions 异步请求
mutations 修改state里边的数据，只能用它来修改
modules 分模块化开发
getters 计算数据

state

使用方法：获取state里边数据 $store.state.list (list是你定义那个数组名字)

actions

使用方法：在里边写完请求，在组件中通过 this.store.dispatch(‘参数一调用你写的请求名’,‘传的参数’)

export default new Vuex.Store({
  //存放数据
  state: {
    count: 5, 
  },
  //2.接受dispatch传递过来的方法和参数
  actions: {
    getParamSync (context,val) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('increment',val)
        },3000)
    }
  }
})

mutations

使用方法：修改state里边的数据，只能用它来修改

 const store = new Vuex.Store({
    //state存储应用层的状态
    state:{
        count:5  //总数：5
    },
    mutations:{
        increment(state，value){
            state.count += value;
        }
    }
 });

getters

使用方法：它是一个计算属性，获取方法 $store.getters.(计算里边那个函数名)

二、Vuex的安装

1 .安装Vuex

npm install vuex --save

2 . 引用vuex，创建仓库store。创建 store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//数据
const state={
    count:10
}
//action  执行异步操作，不可以修改state数据
const actions={
    getParamSync (context,Object) {
	    //处理异步操作
        setTimeout(()=>{
	        //3.通过commit提交一个名为getParam的mutation
	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
            context.commit('increment',Object)
        },3000)
    }
}
//mutation 可直接修改state数据
const mutations={
    increment(state,value){
        state.count += value;
    },
    decrement(state,value){
        state.count -=value;
    }
}
//getter 
const getters = {
    newCount:state => state.count * 3
}
 
export default new Vuex.Store({
	state,
	mutations,
	actions,
	getters
})

3 . 在 main.js中注册到根组件中

import store from './store/store.js'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

安装持久化插件

1、安装

npm install vuex-persistedstate

2 . 在store.js里

import createPersistedState from 'vuex-persistedstate'
const state = {
    user:{},
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins: [createPersistedState()]//会自动保存创建的状态。刷新还在
});

3 . 组件中获取

vuex里面存放的数据，页面一经刷新会丢失：
解决办法：存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取；
在app.vue根组件的created里面判断是否丢失，在进行上面的操作；

 created(){

      if(localStorage.vuex){
          this.list=JSON.parse(localStorage.vuex)
      }

  },

码农公寓