当前位置：首页 > news >正文

uniapp-商城-27-vuex 使用流程

news 2025/4/21 2:47:49

为了能在所有的页面都实现状态管理，我们按照前面讲的页面进行状态获取，然后再进行页面设置和布局，那就是重复工作，vuex 就会解决这样的问题，如同类、高度提炼的接口来帮助我们实现这些重复工作的管理。避免一直在造一样的轮子。

https://vuex.vuejs.org/zh/#%E4%BB%80%E4%B9%88%E6%98%AF%E2%80%9C%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86%E6%A8%A1%E5%BC%8F%E2%80%9D%EF%BC%9F

上面是vuex的官网。

其实以后用vuex 比较少但是vue2 上还是用的多，以后vue3或者4 都是用的Pinia

这样的方案到处都是。

vuex 一般项目中用的就是module 其他的模块都是很少单独使用的。

uniapp中是内置了vue下的。不需要再一次安装，只需要构建一下就好了。

vue2中如果没有安装，可以手动装，

安装 | Vuex

这里要用的有页面动物模块状态，购物车的状态都要用到这样的状态数据。像购物车不可能需要用到购物车的数据的地方都去读取数据库，那样会很麻烦，加大数据库的访问量。而且也慢。

1、建立一个文件夹在项目中 store

2、建立一个文件 index.js 在store--->index.js

3、在index.js 导入vuex， import Vue from "vue"

具体如下：

//1、按照模块进行开发不需要每一页面都定义所以前面开发的shop-headebar.vue 是一个小小的demo 这里还是要用到vuex的概念
//1.1 你改了vuex 中的值就改变了所有的值想想都觉得舒坦如：购物车中数量变化，订单，支付账单，购物页面都一起变化；页面状态值的使用也可以用vuex 用到整体避免每一页都改变
// 2、项目建立store文件夹
// 3、创建 index。js 在 store文件夹
// 4、index中按照如下方式写
import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex) //再vue安装vuex

// 5、index中实例化 vuex
//基本上包含这5个对象
const store = new Vuex.Store({
    state:{
        //定义变量一般这些后面就直接放大modules的js文件中定义，index进行导入就好
        vuexValue1:22, //这里的值，相当于data，每一个页面都可以用
        vuexValue2:232, //这里的值，相当于data，每一个页面都可以用
        vuexName:"开开心心", //这里的值，相当于data，每一个页面都可以用
    },

    getters:{

    },
    mutations:{
        //定义动作 state 是上面定义的变量   num 是传进来的值
        setVuexValue(state,num){
            state.vuexValue1 =num
        }
    },
    actions:{

    },
    modules:{

    }
})

export default store
// 6、 index中要把它导出去，方便引入的页面可以用上面的定义的值和方法

//7、当然这里还需要将其导入到main.jS中，全局导出使用，main.JS如下方式：
/*
import store from '@/store'
//这样就可以对该store进行全局挂载使用
Vue.prototype.$store=store
*/

// 8、然后再需要用的页面导入按照如下方式 import
// 9、在进行计算把需要的值计算过来
/*
<template>
    <view>
        个人中心
        {{vuexValue1}} {{vuexName}}
        <button @click="clkbtn">修改</button>

//这里的变化，就会改变其他使用这个vuexValue1 的值，使用vuex 就是这样的一个好处，一个大脑，多处使用。
</view>
</template>

//this.vuexValue1=55 不能这样

                //这里的修改不能用直接修改需要调用vuex中的方法：如下
                this.setVuexValue(55)    //默认就把state导过来了相当于类不用写变量
            }
        }
    }
</script>

</style>

    */

   // 10.如果其他组件需要用，也要按照 8、9的方法来导入

   // 11 如果后面要改变这里的state 需要使用mutations   ，然后在要用的页面的方法中导入
   /*
   methods:{
       ...mapMutations(["setVuexValue"]),
       clkbtn(){
           this.setVuexValue(55)
       }
    */

//1、按照模块进行开发   不需要每一页面都定义  所以前面开发的shop-headebar.vue  是一个小小的demo  这里还是要用到vuex的概念
//1.1 你改了vuex 中的值 就改变了所有的值  想想都觉得舒坦  如：购物车中数量变化 ，订单，支付账单， 购物页面都一起变化； 页面状态值的使用也可以用vuex 用到整体 避免每一页都改变
// 2、项目建立store文件夹
// 3、创建 index。js 在 store文件夹
// 4、按照如下方式写
import Vue from "vue"
import Vuex from "vuex"Vue.use(Vuex)   //再vue安装vuex// 5、实例化 vuex
//基本上包含这5个对象 
const store = new Vuex.Store({state:{//定义变量  一般这些后面就直接放大modules的js文件中定义，index进行导入就好vuexValue1:22,  //这里的值，相当于data，每一个页面都可以用vuexValue2:232,  //这里的值，相当于data，每一个页面都可以用vuexName:"开开心心",  //这里的值，相当于data，每一个页面都可以用},getters:{},mutations:{//定义动作 state 是上面定义的变量   num 是传进来的值setVuexValue(state,num){state.vuexValue1 =num}},actions:{},modules:{}
})export default store  
// 6、 把它到出去，方便引入的页面可以用上面的定义的值和方法
//7、当然这里还需要将其导入到main.jS中  如下方式：
/*
import store from '@/store'
//这样就可以对该store进行全局挂载 使用
Vue.prototype.$store=store
*/// 8、然后再需要用的页面 导入 按照如下方式  import 
// 9、在进行计算  把需要的值计算过来
/*
<template><view>个人中心{{vuexValue1}} {{vuexName}}  <button @click="clkbtn">修改</button></view>
</template><script>import {mapState,mapMutations} from "vuex"export default {data() {return {};},computed:{...mapState(["vuexValue1","vuexName"])},methods:{...mapMutations(["setVuexValue"]),clkbtn(){this.setVuexValue(55)}}}
</script><style lang="scss"></style>*/// 10.组件需要用，也要按照 8、9的方法来导入// 11 如果后面要改变这里的state 需要使用mutations   ，然后在要用的页面的方法中导入/*methods:{...mapMutations(["setVuexValue"]),clkbtn(){this.setVuexValue(55)}*/

注：------------------------------------

如果我们再两个地方用一个值，那么这里就可以实现一个地方变化，其他地方跟到变化。

很好的例子就是购物车，在多个地方都需要变化

另外：

安装 | Vuex