uni-app+vant 使用vuex 模块化 使用状态管理工具

294 阅读1分钟

`首先创建store文件,创建modules模块化文件夹,创建文件 cart.js,在文件外创建index.js

store>modules>cart.js

----- > index.js

1.在index.js中:

1.引入Vue>Vuex>引入模块> 将vuex安装成为vue的插件

2.创建store 实例 = new Vuex.Store({ 挂载模块 })

3.向外共享store的实例对象 export default store

2.在main.js中:

导入store实例=引入store文件=绝对路径 在const app = new Vue 中将store实例挂载到vue实例上

3.在cart.js中:

export default{

namespaced:true //开启命名空间

} 然后写代码 数据,方法,计算属性等等......

代码模式:

1.在index.js中:

// 引入vue 和vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 引入模块
import cart from './modules/cart.js'

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

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

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

2.在main.js中:

// 导入store实例 文件
import store from './store/index.js'

3.在cart.js中:

export default {
   namespaced:true,  //命名空间
   state:{
     shuzu:[]
   },
   mutations:{
     
   },
   getters:{
     
   }
}

使用时:

      ...mapMutations('模块名',['方法']),
      ...mapMutations('cart',['addTjs']),

温馨提示:

image.png