uni-app中使用vuex

项目中难免都会用到vuex，下面我总结了一下在uni-app中如何使用vuex

• 首先新建文件store/index.js

import Vue from "vue"
import  Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
      // 全局属性变量
      state:{ // state的作用是定义属性变量。定义一个参数
        num:0,
	price:10,
	name:"苹果",
	testList:[]
      },
})

• 注：新建的store文件要main.js注册哦

import store from "./store/index.js"
Vue.prototype.$store=store;

1、首先是mutations的使用方式

//store/index.js文件中
export default new Vuex.Store({
      // 全局属性变量
      state:{ // state的作用是定义属性变量。定义一个参数
        num:0,
	price:10,
	name:"苹果",
	testList:[]
      },
      // 全局同步方法，在methods{this.$store.commit("add")}
      mutations:{
	add(state){
	  state.num++;
	},
	down(state){
	  state.num--;
	},
      },
})


//页面调用 text/index.vue
<template>
  <view>
        <view>vuex测试</view>
        <view>数量：{{num}}</view>
	<button type="default" @click="add">加一</button>
	<button type="default" @click="down">减一</button>
  </vuew>
</template>
// 页面js方法
computed:{
  // 数量
  num(){  //计算数据，视图随之改变（直接返回num，在页面显示）
    return this.$store.state.num;
  },
},
methods: {
  add(){  // mutations的调用方式，通过commit调用
    this.$store.commit("add")  // 直接计算，数据会变化，视图不会更新 ，需要计算属性监听
  },
  down(){
    this.$store.commit("down")  // 直接计算，数据会变化，视图不会更新
  },
}

总结：mutations是一个全局的同步方法，可修改定义在vuex属性的值，在所有页面都可调用，所以有时候在vue中兄弟通讯除了使用事件总线，还可使用vuex的形式，在mutations定义的是数据应该怎样变化。在页面中的调用是通过在方法（methods）中使用this.$store.commit("定义的方法名")，需要注意的是这里的调用用的是commit（actions中使用的是dispatch，两者调用的不同点），如果想使用改变后的值的话，可以在computed中返回的形式使用，如：return this.$store.state.num;
2、计算属性的应用getters

// store/index.js中
//store/index.js文件中
export default new Vuex.Store({
      // 全局属性变量
      state:{ // state的作用是定义属性变量。定义一个参数
        num:0,
	price:10,
	name:"苹果",
	testList:[]
      },
      // 全局同步方法，在methods{this.$store.commit("add")}
      mutations:{
	add(state){
	  state.num++;
	},
	down(state){
	  state.num--;
	},
      },
      // vuex属性计算,在视图里面当变量使用
      getters:{
	conut(state){
	  // 这个函数的执行依赖一个可变的变量
	  return state.num*state.price //数据变化返回出新的值
        }
      },
})


//页面调用 text/index.vue
<template>
  <view>
        <view>vuex测试</view>
        <view>数量：{{num}}</view>
        <view>商品名：{{name}}</view>
        <view>总价：{{conut}}</view>
	<button type="default" @click="add">加一</button>
	<button type="default" @click="down">减一</button>
  </vuew>
</template>
// 页面js方法
computed:{
  // 数量
  num(){  //计算数据，视图随之改变（直接返回num，在页面显示）
    return this.$store.state.num;
  },
  // 价格
  conut(){  // 仅在这里调用即可
     return this.$store.getters.conut;
  },
},
methods: {
  add(){
    this.$store.commit("add")  // 直接计算，数据会变化，视图不会更新 ，需要计算属性监听
  },
  down(){
    this.$store.commit("down")  // 直接计算，数据会变化，视图不会更新
  },
}

总结：getters是一个计算属性，可以计算vuex内的数据，调用方式是在页面的computed中通过this.$store.getters.conut;（conut为定义的方法名）可直接返回，返回出的函数名可只用用于页面显示
3、actions异步请求的使用

// store/index.js中
//store/index.js文件中
export default new Vuex.Store({
      // 全局属性变量
      state:{ // state的作用是定义属性变量。定义一个参数
        num:0,
	price:10,
	name:"苹果",
	testList:[]
      },
      /*
      // 全局同步方法，在methods{this.$store.commit("add")}
      mutations:{
	add(state){
	  state.num++;
	},
	down(state){
	  state.num--;
	},
      },
      // vuex属性计算,在视图里面当变量使用
      getters:{
	conut(state){
	  // 这个函数的执行依赖一个可变的变量
	  return state.num*state.price //数据变化返回出新的值
        }
      },
      */
      actions:{
        testActions(context){
          // context包含了state,mutations，getters
          // console.log(context)
          // 执行异步参数，通用ajax
          setTimeout(()=>{  // 模拟异步请求
            context.state.testList=["猪猪侠","超人强","小飞飞","猪博士","喜羊羊"]
          },2000)
        }
      }
})


//页面调用 text/index.vue
<template>
  <view>
        <view>vuex测试</view>
        <view>数量：{{num}}</view>
        <view>商品名：{{name}}</view>
        <view>总价：{{conut}}</view>
	<button type="default" @click="add">加一</button>
	<button type="default" @click="down">减一</button>
        <button type="default" @click="testActions">testActions</button>
  </vuew>
</template>
// 页面js方法
computed:{
  // 数量
  num(){  //计算数据，视图随之改变（直接返回num，在页面显示）
    return this.$store.state.num;
  },
  // 价格
  conut(){  // 仅在这里调用即可
     return this.$store.getters.conut;
  },
  // 计算vuex中actions
  testList(){
    console.log(this.$store.state.testList) // 会打印得到异步请求的参数
    return this.$store.state.testList;    // 返回可直接使用，如遍历数据
  }
},
methods: {
  add(){
    this.$store.commit("add")  // 直接计算，数据会变化，视图不会更新 ，需要计算属性监听
  },
  down(){
    this.$store.commit("down")  // 直接计算，数据会变化，视图不会更新
  },
  // vuex中调用actions方法
  testActions(){   // 点击按钮执行函数，触发actions里面的方法，在computed计算属性中可获得这个值
    this.$store.dispatch("testActions") // 触发actions里面的方法
  }
}

总结：actions是vuex中异步请求的方法，一般用在公共请求数据接口的地方，调用方式是this.$store.dispatch("方法名")（注：这里是dispatch，与mutations中使用的commit的方式不同，）