vuex状态管理器

vuex核心概念

// vuex中一共有五个状态 State  Getter  Mutation   Action   Module
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  // 里面定义方法，操作state方发
  mutations: {
  },
  // 操作异步操作mutation
  actions: {
  },
  modules: {
  }
})

State

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

在vuex中state中定义数据，可以在任何组件中进行调用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //数据，相当于data
  state: {
    name:"张三",
    age:12,
    count:0
  },
})

调用方式

• 方式一

在标签中直接 调用如:

<p>{{$store.state.name}}</p>
<p>{{$store.state.age}}</p>

• 方式二

// this.$store.state.全局数据名称如
<script>
export default{
  data(){
      return{
        name:'',
        age:this.$store.state.age
      }
    },
  methods:{
      giveName(){
        thsi.name = this.$store.state.name
      }
    }
}
</script>

• 方式三

从vuex中按需导入mapstate函数如:

<script>
import { mapState } from "vuex";
export default{
  data(){
      return{
      }
    },
  computed: {
    ...mapState([name, age])
  }
}
</script>

Mutation

// 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: '张三',
    age: 12,
    count: 0
  },
  getters: {
  },
  // 里面定义方法，操作state方发
  mutations: {
    addCount(state, num) {
      state.count =+ state.count+num
    },
    reduceCount(state) {
      state.count--
    }
  },
  // 操作异步操作mutation
  actions: {
  },
  modules: {
  }
})

• 组件的使用方法

// 方法一
<script>
export default{
  data(){
      return{
      }
    },
  methods:{
      onAddCount(){
         this.$store.commit('addCount', 4)
      },
      onReduce () {
        this.$store.commit('reduceCount')
      }
    }
}
</script>

// 方法二
<script>
export default{
  data(){
      return{
      }
    },
  methods:{
      ...mapMutations(['addCount','reduceCount'])
      onAddCount(){
         this.addCount(4)
      },
      onReduce () {
        this.reduceCount()
      }
    }
}
</script>

Action

Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: '张三',
    age: 12,
    count: 0
  },
  getters: {
  },
  // 里面定义方法，操作state方发
  mutations: {
    addCount(state, num) {
      state.count =+ state.count+num
    },
    reduceCount(state) {
      state.count--
    }
  },
  // 操作异步操作mutation
  actions: {
    asyncAdd (context) {
      setTimeout(() => {
        context.commit('reduceCount')
      }, 1000);
    }
  },
  modules: {
  }
})

/*
* 调用方式
*/

// 方式一
this.$store.dispatch("asynAdd")   

// 方式二

methods:{
   ...mapActions(['asyncAdd '])
   onReduce () {
    this.asyncAdd()
  }
}

Module

mutation主要用于分割

在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  // 里面定义方法，操作state方发
  mutations: {
  },
  // 操作异步操作mutation
  actions: {
  },
  modules: {
    userinfo: {
       state: {
        name: '李四'
       },
       getters: {},
       modules: {}
     },
    header: {
       state: {},
       getters: {},
       modules: {}
     },
  }
})

• 获取方式

this.$store.state.userinfo.name

getter

• getter是对于Store中的数据进行加工处理形成新的数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    counter: 2
  },
  getters: {
    powerCounter(state) {
      return state.counter * state.counter
    },
  },
  // 里面定义方法，操作state方发
  mutations: {
  },
  // 操作异步操作mutation
  actions: {
  },
  modules: {}
})

• 调用方式

// 方法一

<p>{{$store.getters.powerCounter()}}</p>

// 方法二

<script>
import { mapGetters } from "vuex";
export default{
  data(){
      return{
      }
    },
    computed: {
      ...mapGetters(['powerCounter'])
    },
  methods:{
      onAddCount(){
         this.powerCounter()
      },
    }
}
</script>