vuex状态管理工具

一、vuex

它有以下几个核心部分组成：
1. state:存储数据；
2. mutations:更新数据的方法；
3. actions:调用mutations方法，更新state数据；
4. getters:对state中的数据进行预处理；
5. Module： store 分割成模块

创建目录

./sotre/index.js

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

Vue.use(Vuex)

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((itemModules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  itemModules[moduleName] = value.default
  return itemModules
}, {})

const store = new Vuex.Store({
  modules,
})

export default store

 

./sotre/modules/Acl.js

const state = () => ({
  admin: false,
  role: ['role'],
  ability: ['ability'],
})
const getters = {
  admin: (state) => state.admin,
  role: (state) => state.role,
  ability: (state) => state.ability,
}
// mutations是更改state的唯一方法 推荐，不建议直接修改state的值，
// 通过mutation更改state的值，vue可以监听到，页面立即响应，直接更改state vue监听不到，页面无法更新
const mutations = {
  setFull(state, admin) {
    state.admin = admin
  },
  setRole(state, role) {
    state.role = role
  },
  setAbility(state, ability) {
    state.ability = ability
  },
}
// 在action中发送请求，
// 用commit触发mutions的方法
const actions = {
  setFull({ commit }, admin) {
    commit('setFull', admin)
  },
  setRole({ commit }, role) {
    commit('setRole', role)
  },
  setAbility({ commit }, ability) {
    commit('setAbility', ability)
  },
}
export default { namespaced: true, state, getters, mutations, actions }

state的使用

<template>
  <div class="demo">
    <fieldset>
      <legend>State</legend>
      <div>
        <div> 直接拿state的数据</div>
        <div>
          admin ： {{this.$store.state.Acl.admin}}
        </div>
        <div>
          ability ： {{this.$store.state.Acl.ability}}
        </div>
        <div>
          role ： {{this.$store.state.Acl.role}}
        </div>

      </div>
      <div>
        <div> 使用mapState拿state的数据</div>
        <div>
          admin ： {{this.Acl.admin}}
        </div>
        <div>
          ability ： {{this.Acl.ability}}
        </div>
        <div>
          role ： {{this.Acl.role}}
        </div>

      </div>
    </fieldset>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  created () {
  },
  computed: {
    ...mapState(["Acl"]),
    // 传对象修改传入名称
    // ...mapState({
    //   acl:'Acl',
    // }),
    // 开启命名空间的写法 推荐
    // ...mapState('Acl',['admin', 'ability', 'role']),
  },
  methods: {
  },
  mounted () {
  },
};
</script>
<style scoped>
.demo {
  border: 1px solid black;
}
</style>

getters的使用

<template>
  <div class="demo">
    <fieldset>
      <legend>Getter</legend>
      <div>
        <div> 直接拿getter的数据</div>
        <div>
          admin ： {{this.$store.getters['Acl/admin']}}
        </div>
        <div>
          ability ： {{this.$store.getters['Acl/ability']}}
        </div>
        <div>
          role ： {{this.$store.getters['Acl/role']}}
        </div>

      </div>
      <div>
        <div> 使用mapGetter拿getter的数据</div>
        <div>
          admin ： {{this['Acl/admin']}}
        </div>
        <div>
          ability ： {{this['Acl/ability']}}
        </div>
        <div>
          role ： {{this['Acl/role']}}
        </div>

      </div>
    </fieldset>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  created () {

  },
  computed: {
    ...mapGetters(['Acl/admin', 'Acl/ability', 'Acl/role']),
    // 传对象修改传入名称
    // ...mapGetters({
    //   admin:'Acl/admin',
    //   ability:'Acl/ability',
    //   role:'Acl/role',
    // }),
    // 开启命名空间的写法 推荐
    // ...mapGetters('Acl', ['admin', 'ability', 'role']),
  },
  methods: {
  },
  mounted () {
  },
};
</script>
<style scoped>
.demo {
  border: 1px solid black;
}
</style>

Mutations

<template>
  <div class="demo">
    <fieldset>
      <legend>Mutations</legend>
      <div @click='MutationsClick'>
        Mutations更改state的值
        点击触发Mutations
      </div>
    </fieldset>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  created () {
  },
  computed: {
    // 传对象修改传入名称
    ...mapState({
      acl: 'Acl',
    }),
  },
  methods: {
    // ...mapMutations(['Acl/setFull','Acl/setRole','Acl/setAbility']),
    // 传对象修改传入名称
    // ...mapMutations({
    //   acl: 'Acl',
    // }),
    // 开启命名空间的写法 推荐
    ...mapMutations('Acl', ['setFull', 'setRole', 'setAbility']),
    MutationsClick () {
      window.console.log('acl', JSON.parse(JSON.stringify(this.acl)));//state中的属性和值
      this.setFull(true);// 修改admin为true
      this.setRole([1, 2, 3]);// 修改role为[1,2,3]
      this.setAbility([4, 5, 6]);// 修改ability为[4, 5, 6]
      window.console.log('acl', this.acl);// 查看修改后state中的属性和值
    }

  },
  mounted () {
  },
};
</script>
<style scoped>
.demo {
  border: 1px solid black;
}
</style>

Actions

<template>
  <div class="demo">
    <fieldset>
      <legend>Actions</legend>
      <div @click='ActionsClick'>
        Actions更改state的值
        点击触发Actions
      </div>
    </fieldset>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  created () {
  },
  computed: {
    // 传对象修改传入名称
    ...mapState({
      acl: 'Acl',
    }),
  },
  methods: {
    // ...mapActions(['Acl/setFull','Acl/setRole','Acl/setAbility']),
    // 传对象修改传入名称
    // ...mapActions({
    //   acl: 'Acl',
    // }),
    // 开启命名空间的写法 推荐
    ...mapActions('Acl', ['setFull', 'setRole', 'setAbility']),
    ActionsClick () {
      window.console.log('acl', JSON.parse(JSON.stringify(this.acl)));//state中的属性和值
      this.setFull(true);// 修改admin为true
      this.setRole([11, 22, 33]);// 修改role为[11, 22, 33]
      this.setAbility([44, 55, 66]);// 修改ability为[44, 55, 66]
      window.console.log('acl', this.acl);// 查看修改后state中的属性和值
    }

  },
  mounted () {
  },
};
</script>
<style scoped>
.demo {
  border: 1px solid black;
}
</style>

注意点

因为vuex是在缓存中的，所以页面刷新数据会丢失。
解决方法，把请求到的数据放入vuex中时，同时放入localStrong中。在用户刷新页面时，获取lcoalStrong中的信息，存入vuex中。