介绍

Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

安装

uni-app内置了Vuex，不需要去安装，直接导入即可使用。

配置

在 uni-app 项目根目录下，新建 store 目录，在此目录下新建 index.js 文件。在 index.js 文件配置如下：

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

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

//Vuex.Store 构造器选项
const store = new Vuex.Store({
    // 状态
    state:{
        "username":"foo",
        "age":18
    }
})
export default store

导入store并挂载

向main.js添加如下注释的两处代码

import App from './App'
import store from './store' // 导入store
import Vue from 'vue'
import './uni.promisify.adaptor'

Vue.config.productionTip = false

App.mpType = 'app'
const app = new Vue({
  ...App,
  store  // 将`store`与Vue实例关联
})
app.$mount()

使用

获取state

1.1 首先要引入Vuex的辅助函数mapState

import { mapState, mapMutations } from 'vuex'

1.2 在计算属性中映射

    computed: {
    /**
     * 数组形式
     * 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
     * */
    ...mapState(["count", "name"]),


    /**
     * 对象形式
     */
    ...mapState({
      count, // 这种就是count:"count", 的简写
      count1: "count1",
      repeatCount: "count2", // 当组件中与vuex中的字符已经出现重复时，使用 repeatCount 来映射 store.state.count2
      count3: (state) => { // 映射 count3 为 store.state.conut3的值
        return state.count3
      },
      helloName: function (state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数
        return this.hello + state.name
      },
      addNumber: function (state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数
        return this.number + state.count
      }
    })
  },

如果要使用模块区分

首先要开启 namespaced。比如：

/**
 * vuexTest.js
 * modules 中的数据
 */
export default {
    namespaced: true, // 开启命名空间
    state: {
        moduleVal: 1,
        moduleName: "战战兢兢"
    },
    getters: {
    },
    mutations: {
    },
    actions: {
    }
}

然后映射

computed: {
    /**
     * 数组形式
     * 当映射的计算属性的名称与 与模块中vuexTest中state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组，
     * */
    ...mapState("vuexTest", ["moduleVal", "moduleName"]),
    // "vuexTest" 指向模块vuexTest，"moduleVal"表示store.vuexTest.moduleVal


    /**
     * 对象形式
     */
    // 第一种对象方式
    ...mapState({
      moduleVal: "vuexTest/moduleVal",
      moduleNameOther: "vuexTest/moduleName" // 表示 moduleNameOther 映射到vuexTest模块中moduleName
    }),

    ...mapState("vuexTest", {
      moduleVal, // 这种就是moduleVal:"moduleVal", 的简写
      moduleName: "moduleName",
      moduleNameOther: "moduleName", // 当组件中与vuex中的字符已经出现重复时，使用 moduleNameOther 来映射 store.state.vuexTest.moduleName
      moduleVal: (state) => { // 映射 moduleVal 为 store.state.vuexTest.moduleVal的值
        return state.moduleVal
      },
      helloName: function (state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数
        return this.hello + state.moduleName
      },
      addNumber(state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数
        return this.number + state.moduleVal
      }
    })
  },

基于Vue2的uni-app使用状态管理Vuex - mapState篇

介绍

安装

配置

导入store并挂载

使用

获取state