不同的vuex的写法
- state:单一状态树,每个应用将仅仅包含一个store实例。在元素绑定的过程中,直接在引号里面使用this.$store.state.状态名字
<div v-show="状态名字"></div>
//状态名字是你在store.js中state定义的状态属性
- 计算属性写法一:
//伪代码
<div v-show="computedShow"></div>
computed:{
computedShow()
{
return this.$store.state.状态名字
}
}
- 计算属性写法二://如果页面出现页面级的computed,那么就无法使用了
//伪代码
<div v-show="状态名字"></div>
//引入模块
import {
mapState} from 'vuex';
//使用计算属性
computed:mapState(['状态名字'])
- 计算属性写法三:
//伪代码
<div v-show="状态名字"></div>
//引入模块
import {
mapState} from 'vuex';
//使用计算属性
computed:{
...mapState(['状态名字']),
a(){
return xxx;
}
}
getters。
用于对store里state数据进行处理
getters:{
a(){
return a;
}
}
- 计算属性写法:
import {
mapGetters} from 'vuex';
...mapGetters(['状态名字']),
mutations。
用于存放接收组件发来的状态值,再跟state的状态值做相应的处理
- 写法一:直接写函数
mutations: {
//显示底部导航
FooNavShow(state, loop) {
// console.log(state)这个是获取上面state里面的值
// console.log(loop)这个是传过来的值
state.isfilmfooNavShow = loop;
},
}
- 写法二:常量的设计风格
//外部文件
const GET_SHOW_DATA = 'getNavshow'
export {
GET_SHOW_DATA}
//store文件
import {
GET_SHOW_DATA} from 'xxx'
mutations:{
[GET_SHOW_DATA](state,loop){
//mutate state,ES6的一种赋值写法
}
//实质是
getNavshow(state,loop){
//mutate state
}
}
//组件内
import {
GET_SHOW_DATA} from 'xxx'
this.$store.commit(GET_SHOW_DATA,'传的值')