vuex在uniapp中引用得过程及简单使用过程

169 阅读1分钟

1、在根目录下新建一个store文件夹,里头新建index.js文件

import Vue from "vue"
import Vuex from 'vuex'

Vue.use(Vuex)


export default new Vuex.Store({
	state:{
		cart:[]   //静态公共
	},
	mutations:{
		//ass(state,data){     //方法(a,b为固定)
		//	state.cart=data	
	//	},
        remove(state,i){
			state.cart.splice(i,1)
		}
	}
})

穿插,在main.js中引入

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

2、在主组件中使用,例如:

<template>
	<view class="">
		<view  v-for="(item,index) in arr1">
			<navigator url="../../components/menu/Menu" @click="remove(i);cart.push(item)">{{item.name}}</navigator>
		</view>
	</view>
</template>

<script>
	import {mapMutations ,mapState} from 'vuex'
	export default{
		data(){
			return{
				arr1:[
					{name:"fds",id:1,qi:"dsf"},
					{name:"dsfs",id:2,qu:"sdfsdf"},
				]
			}
		},
		computed:{
			...mapState(['cart'])
		},
		methods:{
			...mapMutations(['ass','remove'])
		}
	}
</script>

<style scoped>
</style>

3、在子组件中使用静态公共数组,例如

<template>
	<view class="">
		<view v-for="item in cart">与{{item.name}}得对话</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		computed:{
			...mapState(['cart'])
		}
	}
</script>

<style>
</style>