uniapp内置了vuex,所以不需要额外安装vuex,可以直接导入,直接使用。
vuex在uniapp中如何导入?
第一步,在项目根目录下创建store文件夹,在store文件夹下创建文件index.js
第二步,在创建的index.js中导入vue,导入vuex,并创建store对象,导出store对象
import Vue from "vue" //引入vue
import Vuex from "vuex" // 引入vuex
Vue.use(Vuex) // 让vue使用vuex
// 通过vuex构造函数创建store对象
const store = new Vuex.Store({
state: {
},
mutations: {
},
modules: {
shopcar: {
state: {
checkedGoods:[],
allMoney:""
},
mutations: {
changeCheckedGoods () {
},
changeAllMoney (state,playload) {
state.allMoney = playload.arguments.allMoney
}
}
}
}
})
export default store //导出store对象
第三步,在项目main.js文件中引入刚才导出的store,注意路径。将引入的store挂载到vue的原型上,最后挂载到全局vue的实例上
import Vue from 'vue'
import App from './App'
import store from './store' //从第二步文件夹中引入的store
Vue.prototype.$store = store //将store挂载到vue原型上
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App,
store //将store挂载到vue全局实例上
})
app.$mount()
这样就算完成vuex在uniapp中的导入了。
vuex在uniapp中如何使用?
与vue框架下的vuex使用不同,在uniapp中,组件内无法直接在标签中使用vuex的任何数据或者方法。
必须在组件内的data或者computed或者props中保存vuex中需要的数据或者方法,在页面上只能渲染组件内的data,computed,或者props,不能直接渲染vuex中的东西。
错误示范
<div class="all-price" >
{{this.$store.state.shopcar.allMoney}}
</div>
正确的方式有两种
第一种,一个一个从vuex中导入需要的数据保存到组件的变量中,在通过这些变量渲染到页面上
组件内js部分
export default {
data() {
return {
goodsList:[],
allMoney:"00.00", //组件中用来转存的变量,必须存在,并且不能为空,
gradPrice: "2.00"
}
},
onLoad(options) {
//将vuex中的值赋值给组件保存的变量
this.$data.allMoney = this.$store.state.shopcar.allMoney
}
}
组件内html渲染部分
<div class="all-price" v-text="'¥'+ allMoney"></div>
第二种,将vuex中所有的内容全部导入组件内,按照对应的名字渲染即可
组件内js部分
//比如导入vuex中的所有state和mutations
import {
mapState,
mapMutations
} from 'vuex';
export default {
data() {
return {
goodsList:[],
allMoney:"00.00",
gradPrice: "2.00"
}
},
computed: {
//将需要数据的名字以参数的形式放在数组参数中,state中的东西,只能放到computed,不能让放到data对象中
...mapState(['avatarUrl', 'login', 'userName'])
},
methods: {
//将需要mutations方法的名字以参数的形式放在数组参数中,建议将mutations放到methods中
...mapMutations(['logout'])
}
}
组件内html渲染
<div class="all-price" v-text="login"></div>
uniapp中关于vuex的常用语法
组件调用vux的mutations中的方法
//type对应的是vuex中保存的mutations的方法名,无论是保存到mutations还是保存到modules的mutations中,都能成功。
// arguments 对应的是传过去的参数
this.$store.commit({
type:"changeAllMoney",
arguments: {
allMoney: allMoney
}
})
// vuex中,通过非特殊形参接收,一般写为playload
mutations: {
changeCheckedGoods () {
},
changeAllMoney (state,playload) {
state.allMoney = playload.arguments.allMoney
}
}
组件调用vuex内部的actions的方法
<div>
{{this.$store.state.count}}
</div>
<button @click="addcount(5)">点击+5</button>
<button @click="addcount(10)">点击+10</button>
export default {
methods: {
addcount (number) {
this.$store.dispatch({
type: 'addcount',
number: number
})
}
}
}
第二步,在store文件夹下的index.js中的actions中创建一个方法
addcount。 addcount就是上一步的type属性,可以自己定义
actions: {
addcount (context, playload) {
setTimeout(() => {
console.log("模拟的异步操作")
},1000)
context.commit({
type: 'addc',
number: playload.number//接收组件传过来的参数
})
}
}
第三步,在store文件夹下的index.js中的mulations创建一个方法
addc。addc就是上一步type属性,可以自己定义
mutations: {
addc (state, playload) {
state.count = state.count + playload.number
//对state里面的数据进行操作
}
}
组件中调用vuex的state
this.$store.state.属性名
组件中调用vux中modules的state
this.$store.state.modules名.属性名