459b4690-23ab-11eb-b623-368fe856f9f2 00_00_00-00_00_30.gif

前言：

Vuex是专为Vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。其核心就是store（仓库），它是一个容器，包含着你的应用中大部分的状态（state）。状态存储是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相关的组件也会相应地得到更新。

在老项目中使用vuex，需要先额外安装vuex包，然后在进行配置。在新项目中使用vuex，可以在配置vue-cli时直接选中vuex项，这样就不用做任何配置了（脚手架会自动完成）。此外，如果应用变得非常复杂时，为了解决store对象臃肿的问题，Vuex允许我们将store分割成模块，每个模块都可以拥有自己的state、mutations、actions等。

然而，是否要使用vuex需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用Vuex可能会显得繁琐冗余。

步骤：

安装Vuex：在项目中使用Vuex，需要先安装Vuex。可以通过npm或yarn进行安装。
创建Store：在项目中创建一个store.js文件，用于存放全局的状态和操作状态的方法。
State：在store中定义一个名为state的属性，用于存放全局的状态。
Getters：在store中定义一个名为getters的属性，用于获取全局状态的计算值。
Mutations：在store中定义一个名为mutations的属性，用于修改全局状态的方法。每个方法接收state作为第一个参数，提交载荷（payload）作为第二个参数。
Actions：在store中定义一个名为actions的属性，用于处理异步操作和多个mutation的情况。每个方法接收context作为第一个参数，提交载荷（payload）作为第二个参数。
Modules：如果项目较大，可以将store拆分成多个模块，每个模块拥有自己的state、mutations、actions和getters。

真实举例：

1.store：

state:{
    isLogin:false,
    user: uni.getStorageSync('user'),
    wxid: uni.getStorageSync('wxid'),
    app:{},
    goodList:[]
},
mutations:{
    //修改state状态的方法
},
action:{
    //异步操作和多个mutation的方法
    //获取openid
     getOpenid(context) {
       return new Promise((resolve, reject) => {
          let wxid = uni.getStorageSync("wxid")
          if (wxid != null && wxid != "") {
		  context.state.wxid = wxid
		  resolve(wxid.openId)
		  return
          }
          uni.login({
                provider: 'weixin',
                async success(res) {
                  if (res.code == undefined) {
                    Vue.prototype.$api.msg('程序出错！');
                    reject('程序出错！');
                    return
                  }
                  let res_getopenid = await Vue.prototype.$api.request({url: '/getOpenId',data: {code: res.code},showLoading:false})
                  if (res_getopenid == null) {reject('程序出错！');return}
                  context.state.wxid = res_getopenid
                  uni.setStorageSync("wxid", res_getopenid)
                  resolve(res_getopenid.openid)
                }
          })
      })
   },
},

d5a8fde0-23b5-11eb-9b70-86c835170013 00_00_00-00_00_30.gif

如何使用action中的方法

项目在首页的时候获取openid

async onLoad(option) {
  this.$store.dispatch("getOpenid")
  this.$forceUpdate()
},

import store from './store'
Vue.prototype.$store = store;

注意： 1.$forceUpdate()为强制dom重新渲染 2.使用this调用store，需要在main.js(入口文件)中注册 3.异步方法需要写在action中

如何使用state中的变量

    \\解构
    import { mapState } from 'vuex';
    computed: { ...mapState(['user', 'isLogin']) },

注意：在Vuex中，我们需要使用computed来接收解构的state，原因在于data中的内容只会在created钩子触发前初始化一次。如果此时data里面绑定的是vuex的状态类型数据，那么后面无论怎样修改vuex的state状态，data中对应的属性值是不会发生变化的。

相比之下，computed是通过依赖追踪实现的，即在computed求值时引用的Vue变量（包括Vuex的状态变量）变化时，会触发对computed的重新计算。因此，我们可以使用computed去引用Vuex的状态变量，从而使得依赖追踪生效，实现数据和视图的动态绑定。

此外，结合mapStateToComputed函数，我们甚至可以将Vuex的状态变量映射到computed属性中，这样在模板中就可以直接使用这些经过映射的计算属性，使代码更加清晰易读。

如何使用mutations中的方法

    \\退出登录的时候，需要清除登录状态
    this.$store.commit("logout")

如何使用getters中的方法

   \\state二次处理的数据
   goodList: state => state.app.goodList.filter(type->type==1),

----未完待续 092ae1d2-ec5d-11ea-acfd-5ab503a75443 00_00_00-00_00_30.gif

uniapp中vuex的使用规则ʕ•̫͡• ʔ•̫͡•ཻʕ•̫͡•ʔ•͓͡•ʔ ᕙ(•̤᷆ ॒ ູ॒•̤᷇)ᕘ

前言：

步骤：