vuex基础知识理解

vuex基础知识理解

什么是vuex？

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

如何安装vuex？

npm i vuex --save
cnpm i vuex --save

如何引入vuex？

在src下面创建一个store的文件夹，其里面创建一个index.js，js文件中代码如下

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  getters:{},
});

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {
    addNum(state) {
      state.num++
    },
    addNumN(state, num) {
      state.num += num
    }
  },
  actions: {
    asyncAdd(context) {
      setTimeout(() => {
        context.commit('addNum')
      }, 1000);
    },
    asyncAddN(context, num) {
      setTimeout(() => {
        context.commit('addNumN', num)
      }, 1000);
    },
  },
  modules: {}
});

然后只需要在main.js中引入我们刚创建好的index.js 文件即可，同时挂载到实例上

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

vuex中的核心概念？

state:驱动应用的数据源

页面访问store中state数据的两种方式：

1. template中使用$store.stats.数据名称；data中需要添加this
2. 使用mapstate映射为计算属性

import {mapState} form 'vuex'
computed:{
...mapState(['数据名称'])
}

mutations:用于更改state中的数据

页面触发mutations中方法的方式：可传递两个参数 第一个值为mutations中的方法 ，第二个值为形参

1. 使用this.$store.commit('方法名称')
2. 使用mapMutations映射为页面的methods函数

import {mapMutations} from 'vuex'

methods:{
...mapMutations(['方法名称'])
}

actions:用于处理异步任务  异步修改state中的数据需要放在actions中进行操作

页面触发actions异步操作的方法：actions方法中可传递两个参数 第一个值可认为是store实例 不能直接修改state中的数据 只能通过调用mutations中的方法进行更改，第二个值为形参

1. 使用this.$store.dispatch('actions方法名称')
2. 使用mapActions映射为页面的methods方法

import {mapActions} from 'vuex'

methods:{
...mapActions(['方法名称'])
}

 getters:对state数据进行加工操作，类似于页面中的计算属性

页面触发getters的方式

1. 使用this.$store.getters.名称
2. 使用mapGetters映射为计算属性        

import {mapGetters} form 'vuex'
computed:{
...mapGetters(['名称'])
}