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

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

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

Vuex

优势与使用场景

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

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

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

Vuex与全局变量区别

文件结构

├── 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进行使用，而不需要重新登录或者使用传值通信等方式，非常方便。