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的方式不同，）
