vuex

vuex在项目中维护一个状态，在项目中的作用是一个唯一的数据源， 相当于全局对象，各个组件共享这一个对象

初始化一个新项目

vue init webpack myvue3

安装vuex

npm install vuex --save

现在的项目结构如下

开始在main.js中引入并使用vuex, 在对象store的mutations中定义处理函数

import Vue from 'vue'
import App from './App'
import router from './router'
import vuex from 'vuex'
Vue.config.productionTip = false

Vue.use(vuex);

//实例state对象
const store = new vuex.Store({
  //全局状态
  state:{
    count: 0
  },
  //定义处理函数
  mutations:{
    add(state){
      this.state.count += 1;
    },
    decrease(state){
      this.state.count -= 1;
    }
  }
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store //在vue中使用store
})

修改HelloWorld.vue如下, “$store.commit(‘add’)” 表示触发mutations中函数，处理状态值

<template>
  <div class="hello">
    {{this.$store.state.count}}
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('decrease')">-</button>
  </div>
</template>

<script>

  export default {
    name: 'HelloWorld',
    data() {
      return {
      }
    }
  }
</script>

<style scoped>
</style>

打开页面，就可以在组件中动态的更改状态值啦

再来修改下HelloWorld.vue， 换成计算属性的写法，每次只需要调用计算属性即可：

<template>
  <div class="hello">
    {{count}}
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('decrease')">-</button>
  </div>
</template>

<script>

  export default {
    name: 'HelloWorld',
    data() {
      return {
      }
    },
    computed:{
      count(){
        return this.$store.state.count;
      }
    }
  }
</script>

<style scoped>
</style>

上面是演示了一个状态count的情况， 若状态过多，就要写多个计算属性也是累赘， 所以vuex提供了一个辅助函数mapState。
再增加一个状态

//实例state对象
const store = new vuex.Store({
  //全局状态
  state:{
    count: 0,
    name: '张三'
  },
  ......

使用mapState

<template>
  <div class="hello">
    {{count}}{{name}}
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('decrease')">-</button>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: 'HelloWorld',
    data() {
      return {
      }
    },
    computed: mapState(['count', 'name'])
  }
</script>

<style scoped>
</style>

actions

通过上面例子大致明白了组件中获取状态值，组件中通过触发mutations定义的函数来处理state值。 接着了解下actions， 在mutations可以对多个state操作，那么actions就可以理解为可以对多个mutations进行操作，如下actions中定义了一个init_add函数，表示初始化数据和执行一次+1操作

import Vue from 'vue'
import App from './App'
import router from './router'
import vuex from 'vuex'
Vue.config.productionTip = false

Vue.use(vuex);

//实例state对象
const store = new vuex.Store({
  //全局状态
  state:{
    count: 0,
    name: '张三'
  },
  //改变状态
  mutations:{
    init(state){
      this.state.count = '100';
      this.state.name = "王五";
    },
    add(state){
      this.state.count += 1;
    },
    decrease(state){
      this.state.count -= 1;
    }
  },
  actions:{
    init_add(state){
      state.commit('init');
      state.commit('add');
    }
  }
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store //在vue中使用store
})

组件调用的地方要修改成dispatch，触发actions

<button @click="$store.dispatch('init_add')">初始化并增加</button>