vuex的使用

computed的响应式依赖(缓存)

1. computed的每一个计算属性都会被缓存起来，只要计算属性所依赖的属性发生变化，计算属性就会重新执行，视图也会更新。下面代码中，计算属性fullName，它依赖了firstName和lastName这两个属性，只要它们其中一个属性变化，fullName就会重新执行。
   2.computed计算属性会被缓存，在下面代码中使用了两次fullName，但在控制台只输出了一次 “这是fullName”。

mapState作用：可以辅助获得多个state的值

vuex中state中的数据在使用的时候，一般都是在computed中定义的，以为在data中定义的话是一次性的，不会随着vuex中数据变化而变化，虽然可以通过watch监听，但是很麻烦,如下:

//在计算属性中
computed:{
	...mapState([
		//必须带引号
		'menuStatus'
	])
}

computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      avatar: state => state.user.avatar
    }),
    ...mapGetters([
      'company'
    ])

  },

Vuex文件 src/store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export const store = new Vuex.Store({
  // state专门用来保存 共享的状态值
  state: {
    // 保存登录状态
    login: false
  },
  // mutations: 专门书写方法,用来更新 state 中的值
  mutations: {
    // 登录
    doLogin(state) {
      state.login = true;
    },
    // 退出
    doLogout(state) {
      state.login = false;
    }
  }
});

组件JS部分 : src/components/Header.vue

<script>
// 使用vux的 mapState需要引入
import { mapState } from "vuex";

export default {
  // 官方推荐: 给组件起个名字, 便于报错时的提示
  name: "Header",
  // 引入vuex 的 store 中的state值, 必须在计算属性中书写!
  computed: {
    // mapState辅助函数, 可以快速引入store中的值
    // 此处的login代表,  store文件中的 state 中的 login, 登录状态
    ...mapState(["login"])
  },
  methods: {
    logout() {
      this.$store.commit("doLogout");
    }
  }
};
</script>

mapGetters

引入

   import { mapGetters  } from "vuex";

如果一个变量或对象需要在多个页面和组件中使用，那么，可以使用mapGetters。

computed: {
               ...mapGetters(["freeShipping"])
          } ,

  computed: mapGetters(["userInfo","freeShipping"]),

3，页面变量取用

{{freeShipping.value}}

//state的作用是存储公共数据
//state是响应式的，如果修改了属性，那么在相对应，组件视图上的值也会改变
//在store里定义格式
new Vuex.store({
  state: {
   属性名： 属性值 
  }
})

//在组件中使用格式
this.$store.state.属性名

//在模板中可省略this
{{$store.state.属性名}}

//在组件中使用map辅助函数：
computed: { 
  ...mapState(['属性名']), 
  ...mapState({'新名字': '属性名'})
}

Vuex- Action的 { commit }

没有解构的

actions: {
    increment (context) {
      context.commit('increment')
    }
  }

ES2015参数解构 (opens new window)的简化代码

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

在vue组件中get

import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['number']),
}，
mounted () {
this.$store.dispatch('setNumber',10).then(() => {
console.log(this.number)
})
}
}

Vue中this.$store.dispatch()与this.$store.commit()

this.$store.commit()
commit: 同步操作
this.$store.commit('方法名',值)【存储】

this.$store.state.方法名【取值】
this.$store.dispatch()
dispatch: 异步操作

this.$store.dispatch('方法名',值)【存储】

this.$store.getters.方法名【取值】

action的用法
action的用法
根据 vuex 的 this.$store.dispatch() 返回值 处理逻辑