vuex学习笔记

1.vuex的基础介绍

vuex是一个专为vue.js应用程序并发的状态管理模式,它采样集中式储存管理应用的所有组件的状态,并以想应的规则保证状态以一种可预测的方式发生改变

vuex是采用集中式管理组件依赖的共享数据的一个工具,可以解决不同组件的共享问题

 结论

1.修改state(共享状态数据)状态只能通过mutaitions

 2.只能执行同步代码.   ajax 定时器  promise 不能

3.执行异步代码要通过actions,然后把数据提交给mutaitions才能完成

4.组件中可以调用aciton

vuex基础使用

初始化功能

main.js中引入 注册 实例化

import Vuex from 'vuex'  

Vue.use(Vuex)

const store = new Vuex.Store({})

new Vue({

  render: h => h(App),

  store,

}).$mount('#app')

vuex-State:

放置在所有公共状态的属性,如果你有一个公共状态数据,你只需要定义在state对象中

辅助函数 mapState

1.在app.vue 按需导入import { mapState } from "vuex";

2.在计算属性中

利用展开运算符将导出的状态映射

    ...mapState(["count"]),

vuex-mutations

数据快照 一次mutations的执行,立刻得到视图状态,因为是立刻 所以是同步

原始方法

1.先定义mutations

const store = new Vuex.Store({
  //实例化vuex的构造函数 state mutations actions
  state: {
    //储存的状态
    count: 0
  },
  //修改state必须通过mutations
  mutations: {
    //修改state的方法
    //每一个mutations都有对应的参数
    //stare指当前vuex中的state对象
    //payload 载荷 提交 mutations的方法的时候 传的参数可以是任何形式的 任何类型的值
    addCount(state) {
      state.count += 1
    }
  }

2.创建一个组件 调用mutations方法 

<template>
  <button @click="addfn">+1</button>
</template>

<script>
export default {
  methods: {
    addfn() {
      //调用mutation方法 提交mutation
      //commit('提交mutation名称')
      this.$store.commit("addCount");
    },
  },
};
</script>

<style>
</style>

3.在app.vue中引用

import ChildA from "./components/child-a.vue";

然后使用标签

4.commit传值

第一个参数是mutations的名字 第二个是传过去的参数 payload

export default {
  methods: {
    addfn() {
      //调用mutation方法 提交mutation
      //commit('提交mutation名称')
      //给mutation传值
      //commit的第二个参数就是要传递的载荷 payload传入的参数
      this.$store.commit("addCount",10);
    },
  },
};

辅助函数 mapMutations

哪里用辅助函数就来哪里按需引入

然后通过展开运算符

<template>
  <div>
    <button @click="addfn">+1(原始)</button>
    <button @click="addCount(10)">+10(辅助)</button>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  methods: {
    addfn() {
      //调用mutation方法 提交mutation
      //commit('提交mutation名称')
      //给mutation传值
      //commit的第二个参数就是要传递的载荷 payload传入的参数
      this.$store.commit("addCount", 1);
    },
    ...mapMutations(["addCount"],10),
  },
};
</script>

<style>
</style>

vuex-actions 异步更新

原始方法

1.先在main点js中定义

 actions: {
    //方法 action方法参数 第一个参数上下执行文
    //context 相当于 组件中的this.$store stroe运行实例
    getcount(context,params) {
      setTimeout(function () {
        //commit提交mutations
        context.commit('addCount', params)
      }, 1000);
    }
  }

2.在使用的组件中的方法中

传参

   addfn1() {
      //原始形式
      //commit是提交mutations
      //dispatch 调用 action
      //dispatch(actions的名称)
      this.$store.dispatch("getcount",123);
    },

actions 辅助函数

引入mapActions

import { mapActions } from "vuex";

使用辅助函数

...mapActions(['getcount']),//引入异步acyion

传的值要写

   <button @click="getcount(111)">异步111(辅助)</button>

vuex-getter

原始模式

1.定义gettres在main.js中

data中
list: [1, 3, 6, 8, 9, 6, 70, 15]


getters: {
    getterslist: state => state.list.filter(item => item > 5)
  }

2.然后在组件的标签中使用

 <div>getters原始方法{{ $store.getters.getterslist }}</div>

辅助函数 mapGetters 

1.按需引入

import {  mapGetters } from "vuex";

2.在计算属性中注册

 computed: {
    //将getters中的计算属性             导入到组件的计算属性中
    ...mapGetters(["getterslist"]),
  },

3.使用

<div>getters异步方法{{ getterslist }}</div>