【VUE】vuex写法风格

不同的vuex的写法

1. state:单一状态树，每个应用将仅仅包含一个store实例。在元素绑定的过程中，直接在引号里面使用this.$store.state.状态名字

<div v-show="状态名字"></div>
//状态名字是你在store.js中state定义的状态属性

2. 计算属性写法一：

//伪代码
<div v-show="computedShow"></div>
computed:{
    
    
    computedShow()
    {
    
    
        return this.$store.state.状态名字
    }
}

3. 计算属性写法二：//如果页面出现页面级的computed，那么就无法使用了

//伪代码
<div v-show="状态名字"></div>
//引入模块
import {
    
    mapState} from 'vuex';
//使用计算属性
computed:mapState(['状态名字'])

4. 计算属性写法三：

//伪代码
<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,'传的值')