uniapp vuex篇

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名.属性名