uniapp配置vuex

1. 在根目录上新建 store 目录，并在此目录下新建 store.js 文件，在此文件下写如下代码：

注意：uniapp 配置 vuex 不需要 npm下载，内置的有，直接引用就行。

// 1. 导入 Vue 和 Vuex
import Vue from "vue"
import Vuex from "vuex"


// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)

// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
// 挂载 store 模块
    modules:{}
})

// 向外共享 Store 的实例对象
export default store

2.在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：

// 1. 导入 store 的实例对象
import store from './store/store.js'

// 省略其它代码...

const app = new Vue({
  ...App,
  // 2. 将 store 挂载到 Vue 实例上
  store,
})
app.$mount()

3. 创建 store 子模块，在 store 目录下创建 cart.js  文件，并写入如下代码：

export default {

// 为当前模块开启命名空间
    namespaced: true

// 模块的 state 数据
    state: () => ({

    cart: []
}),
    
// 模块的 mutations 方法
    mutations:{},

// 模块的 actions 方法

    actions:{},

// 模块的 getters 属性
    getters: {}
}

4. 将 cart.js 文件导入 store.js 文件挂载到 modules 内

import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入购物车的 vuex 模块
import moduleCart from './cart.js'

Vue.use(Vuex)

const store = new Vuex.Store({
  // TODO：挂载 store 模块
  modules: {
    // 2. 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
    //    购物车模块中 cart 数组的访问路径是 m_cart/cart
    m_cart: moduleCart,
  },
})

export default store

5. 测试，随便找个页面 导入 vuex看看对不对

// 从 vuex 中按需导出 mapState 辅助方法
import { mapState } from 'vuex'

export default {
  computed: {
    // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
    // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
    ...mapState('m_cart', ['cart']),
  },
}

6. 页面使用，能看到的话就说明没问题了

<!-- 运费 -->
<view class="yf">快递：免运费 -- {{cart.length}}</view>