• 什么是vuex?

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex的基本使用

vuex使用步骤

1. 下载 npm i vuex@3
2. 引入 import Vuex from "vuex";
3. 注册 Vue.use(Vuex)
4. 实例化 const store = new Vuex.Store({})
5. 挂载注入 new Vue({store})

严格模式

• 添加strict: true开启严格模式
• 在严格模式下，状态变更不是由mutations引起的，则抛出错误

state

• 定义：state是用来放置所有公共状态的属性。

// 初始化vuex对象
const store = new Vuex.Store({
  //定义state
  state: {
    // 管理数据
    count: 0
  }
})

• 获取vuex里state数据：this.$store.state

  • 获取state是一个对象

辅助函数 - mapState

• 作用：mapState是辅助函数，把store中的数据映射到组件的计算属性中, 它属于一种方便用法

使用步骤：

• 第一步：导入mapState

import { mapState } from 'vuex'

• 第二步：采用数组形式引入state属性

mapState(['count']) 

• 第三步：利用展开运算符将导出的状态映射给计算属性

computed: {
    ...mapState(['count'])
  }

mutations

• mutations进行同步操作
• state里面的数据只能通过mutations进行修改

const store = new Vuex.Store({
    strict: true,    
    state: {
        a: 1,
        b: 2,
    },
    mutations: {
         addCount(state, payload) {
                state.a += payload
            },
        redCount(state, payload) {
             state.b -= payload
        }
    }
)}

如何调用mutations

• this.$store.commit("函数名"，参数)
• 使用辅助函数mapMutations,...mapMutations(["函数名"])

<template>
  <div>
    <h1>vuex mutations属性</h1>
    <button @click="updataFn">点击修改state的数据</button>
    <button @click="redCount(10)">辅助函数:点击修改state的数据</button>
    <p>{{a}}</p>
    <p>{{b}}</p>
  </div>
</template>

<script>
// 导入vuex辅助函数
import { mapState ,mapMutations } from "vuex";
export default {
  methods: {
    updataFn(){
      this.$store.commit("addCount",10)
    },
    // 辅助函数mapMutations ,传参需要在点击函数传值
    ...mapMutations(["redCount"])
  },
  computed: {
    ...mapState(["a"]),
    ...mapState(["b"])
  }
}
</script>

<style>

</style>

actions

• state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作
• 使用 this.$store.dispatch('函数名')调用actions
• 辅助函数...mapActions(["函数名"])

actions的使用过程

• actions只能进行异步操作

  • 1、actions首先通过调用mutstions中的函数
  • 2、通过mutations的函数对state中的数据进行修改

• 定义actions，并调用mutations中的函数

actions: {
        getAsyncCount(context) {
            setTimeout(() => {
                context.commit("addCount", 100)
            }, 1000)
        }
    },

<template>
  <div>
    <h1>actions属性</h1>
    <button @click="actionsFn">点击调用actions属性</button>
    <button @click="getAsyncCount">辅助函数:点击调用actions属性</button>
    <p>{{a}}</p>
  </div>
</template>

<script>
import { mapState ,mapActions} from "vuex";
export default {
  methods:{
    actionsFn(){
      this.$store.dispatch("getAsyncCount")
    },
    ...mapActions(["getAsyncCount"])
  },
  computed:{
    ...mapState(["a"])
  }
}
</script>

<style>

</style>

getters

• getters是对state中数据进一步的处理,简化数据的使用。

• 方便获取state

• 定义一个getters

const store = new Vuex.Store({
    state: {
        list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    },
    // getters:定义函数，并默认接受state参数
    // getters的函数可以当成普通变量使用
    // 作用，简化数据的使用
    getters: {
        filterList(state) {
            return state.list.filter(item => item > 5)
        }
    }
})

获取getters有两种方式

• this.$store.getters.方法名
• 使用辅助函数mapGetters

<template>
  <div>
    <h1>getters属性</h1>
    <h1>getters属性的值:{{$store.getters.filterList}}</h1>
    <h1>辅助函数:{{filterList}}</h1>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed:{
    ...mapGetters(["filterList"])
  }
}
</script>

<style>

</style>