vuex

1. vuex是vue配套的公共数据管理工具，可以把共享数据保存在vuex，方便整个程序中任何组件直接获取或修改我们的公共数据（vuex是为了保存组件直接共数据诞生的。如果组件有共享数据可以挂vuex。就不需要父子传值，如果数据无需共享，就没必要放vuex）vuex是一个全局共享数据存储区域，相当于数据仓库

2. 父组件传值给子组件绑定：，子组件传递给父组件数据调用this.$emit

3. 一般多层组件嵌套，或者没有任何关系，兄弟传值（即父父传值，可以用vuex）

1.下载

npm install vuex –save

2.两种使用vuex方法，一种直接main.js上挂、另一种单独放一个store文件下（第一种），这里写单独使用文件写法 action异步略（不会

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//hello Vuex
const state= { //类比data
    count: 1 //状态
}
const mutations= { //方法类比methods
    add(state) {
        state.count++;
    },
    reduce(state) {
        state.count--;
    }
    const getters = {  //类比计算属性
        count(state) {
        return state.count+=100;
    }
}
}

export default new Vuex.Store({
    state, //暴露出去
    mutations,
    getters

})

3.demo.vue引入

<script>
import store from '../vuex/store/store.js' //因为不是index.js名字要写全
export default {
    store
}
</script>

4.插值的写法与方法的写法 commit固定vuex函数写法 ---简化写法用到mapState等...扩展运算符在下面展开写

{{$store.state.count}}  @click="$store.commit('add')" 

5. （第二种） main.js

import  Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
  state: {
    //state想象data，准门存储数据
  },
  mutations: {},
  getters: {},
  actions: {}
})
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

如果在组件中想要访问store中state数据，只能通过this.$store.state.***

为什么能直接访问store，只要挂载到vm上就能全局，任何组建都能使用store存取数据

demo.vue

<template>
  <div>
    <button @click="add"></button>
    <input type="text" v-model="$store.state.count"/>
  </div>
</template>

<script>
export default {
  methods: {
    add() {
  //  this.$store.state.count++; // 这么用可以但是不建议这样用(方法2选1,不推荐直接子组件搞)
      this.$store.commit('increment')
    }
  }
}
</script>

vuex简化写法不写了，主要是...map

import { mapState,mapMutactions,mapGetters } from 'vuex' //状态和方法
computed: {
        ...mapState(['count']),
        ...mapGetters(['count'])
}