易语言资源网 - 做最全的易语言资源下载社区
【精易招聘】UniApp开发工程师 精易论坛授权登录

【uniapp实战直播课】02. 使用vuex改进   [复制链接]

    2021-11-06 15:30:32
    uni-app
    易语言资源网
    103 次浏览

第二课: 使用vuex进行状态的保存

针对第一课的内容进行改进,将登录的信息使用vuex做全局状态管理。

Vuex

优势与使用场景

  • Vuex的状态存储是响应式的,可跟踪每一个状态变化,一旦它改变,所有关联组件都会自动更新相对应的数据。

  • 共享数据,解决了非父子组件的消息传递(将数据存放在state中)。

  • 统一状态管理,减少了请求次数,有些情景可以直接从内存中的state获取数据。

Vuex与全局变量区别

vuex全局变量
不能直接改变store里面的变量,由统一的方法修改数据可以任意修改
每个组件可以根据自己vuex的变量名引用不受影响全局变量可能操作命名污染
解决了多组件之间通信的问题跨页面数据共享
适用于多模块、业务关系复杂的中大型项目适用于demo或者小型项目

文件结构

├── pages

├── static

└── store

├── index.js # 我们组装模块并导出 store 的地方

├── actions.js # 根级别的 action

├── mutations.js # 根级别的 mutation

└── modules # 模块文件夹

├── cart.js # 购物车模块

└── products.js # 产品模块

├── App.vue

├── main.js

├── manifest.json

├── pages.json

└── uni.scss

State

单一状态树,每个应用将仅仅包含一个 store 实例。

  • 不可直接对 state 进行更改,需要通过 Mutation 方法来更改。

直接引入的方法:

import store from '@/store/index.js';//需要引入store

Getter

可以认为是 store 的计算属性,对 state 的加工,是派生出来的数据。

Mutation

Vuex中store数据改变的唯一方法就是mutation

通俗的理解,mutations 里面装着改变数据的方法集合,处理数据逻辑的方法全部放在 mutations 里,使数据和视图分离。

访问:

已经注册到全局的,可以使用this.$store进行访问。

也可以通过mapxxx辅助函数进行访问

main.js中加入:

import App from './App'
import store from './store'  ////////////////////////////////

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
Vue.prototype.$store = store ////////////////////////////////
App.mpType = 'app'
const app = new Vue( {
   ...App,
   store ////////////////////////////////////////////////
} )
app.$mount()
// #endif

// #ifdef VUE3
import {
   createSSRApp
} from 'vue'
export function createApp() {
   const app = createSSRApp( App )
   return {
       app
  }
}
// #endif

创建store目录

在目录下创建index.js文件,然后将登录状态的信息保存进来

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use( Vuex ); //vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store( {
   state: { //存放状态
       loginInfo: {
           openid: "",
           sessionkey: ""
      }
  },
   getters: {
       isLogin( state ) {
           console.log( "isLogin:", state.loginInfo.openid, state.loginInfo.sessionkey );
           console.log( state.loginInfo.openid != "" && state.loginInfo.sessionkey != "" );
           return state.loginInfo.openid != "" && state.loginInfo.sessionkey != ""
      },
       getsessionkey( state ) {
           return state.loginInfo.sessionkey;
      }
  },
   mutations: {
       setlogininfo( state, info ) {
           state.loginInfo = info;
      },
       clearlogininfo( state ) {
           state.loginInfo.openid = ""
           state.loginInfo.sessionkey = ""
           console.log( "state: ", state.loginInfo.openid );
           console.log( "state: ", state.loginInfo.sessionkey );

      }
  },
} )
export default store

然后在pages/index/index.vue中进行引用,并且改动上一课的部分:

    /* 引入微信解密的js文件和类 */
   import {
       mapMutations,
       mapGetters,
  } from 'vuex'

放入到computed,为的是能够在变化时,自动更新渲染。

        computed: {
           ...mapGetters( [ 'isLogin' ] ),
      },
 methods: {
           ...mapGetters( [ 'getsessionkey' ] ),
           ...mapMutations( [ 'setlogininfo', 'clearlogininfo' ] ),
               ...
           要去除之前的一些保存代码
}

到此,我们就已将登录状态使用全局的vuex进行管理,在其他地方使用到时候,就可以直接引用vuex进行使用,而不需要重新登录或者使用传值通信等方式,非常方便。



点我下载 (已有 1 次下载)

[错误报告]   上一篇:生成dat授权文件验证 授权端+验证端(...     下一篇:【uniapp实战直播课】03. 使用U...