Vuex使用方法

Vuex是什么？
官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
我的理解：Vuex是把全局共享的状态抽取出来，单独管理。我们不管在哪里修改了状态，Vuex都会通知使用了该状态的组件作出相应的修改。

Vuex的组成

1. state：共享所存储的数据（数据仓库）
2. mutations：修改数据的同步方法（仓库的钥匙）
3. getters：类似vue组件里的computed函数，当所依赖的state里的数据发生改变时可以作出相应的改变（仓库的保安，仓库状态变化了就他也会作出反应）
4. actions：修改数据的异步方法（仓库的钥匙）

state的使用

变量num值为1

import { createStore } from 'vuex'

export default createStore({
  state: {
    num:1,
  },
  mutations: {
  },
  getters:{
  },
  actions: {
  },
  modules: {
  }
})

组件内读取state里的值：this.$store.state.变量名

<template>
  <div>
    <h1>page1:{{this.$store.state.num}}</h1>
  </div>
</template>

<script>
export default {
  name: 'page1',
}
</script>

页面输出

mutations的使用：this.$store.commit(“方法名”)

import { createStore } from 'vuex'

export default createStore({
  state: {
    num:1,
  },
  mutations: {
    add(state){
       return state.num++
    }
  },
  getters:{
  },
  actions: {
  },
  modules: {
  }
})

组件内加一个提交mutations的按钮

<template>
  <div>
    <h1>page1:{{this.$store.state.num}}</h1>
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  name: 'page1',
  methods:{
    add(){
      this.$store.commit("add")
    }
  },
}
</script>

页面效果

getters的使用：

getters里面添加方法

import { createStore } from 'vuex'

export default createStore({
  state: {
    num:1,
  },
  mutations: {
    add(state){
      return state.num++
    },
  },
  getters:{
    addF(state){
      if(state.num ==1){
        return "普通会员"
      }else if(state.num ==2){
        return "高级会员"
      }else{
        return "普通用户"
      }
    }
  },
  actions: {
  },
  modules: {
  }
})

组件内展示用this.$store.getters.方法名

<template>
  <div>
    <h1>page1:{{this.$store.state.num}}</h1>
    <h1>page1:{{this.$store.getters.addF}}</h1>
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  name: 'page1',
  data(){
    return{

    }
  },
  methods:{
    add(){
      this.$store.commit("add")
    }
  },
}
</script>

actions的使用：this.$store.dispatch(“方法名”)
actions类似mutations，但是是异步操作，需要提交到mutations才能修改数据。

import { createStore } from 'vuex'

export default createStore({
  state: {
    num:1,
  },
  mutations: {
    add(state){
      return state.num++
    },
  },
  getters:{
    addF(state){
      if(state.num ==1){
        return "普通会员"
      }else if(state.num ==2){
        return "高级会员"
      }else{
        return "普通用户"
      }
    }
  },
  actions: {
    add(context){
      context.commit("add")
    }
  },
  modules: {
  }
})

<template>
  <div>
    <h1>page1:{{this.$store.state.num}}</h1>
    <h1>page1:{{this.$store.getters.addF}}</h1>
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  name: 'page1',
  data(){
    return{

    }
  },
  methods:{
    add(){
      // this.$store.commit("add")
      this.$store.dispatch("add")
    }
  },
}
</script>