Vuex的学习和使用

什么是vuex？

Vuex 是专门为 Vue.js 设计的状态管理库，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单地说就是采用全局单例模式，将组件的共享状态抽离出来管理，使组件树中的每一个位置都可以获取共享的状态（变量）或者触发行为。

额，或者更直白的说就是响应式的全局变量

vuex核心概念

State	共享状态（即变量）
Getter	基于state的派生状态，可理解为组件中的计算属性
Mutation	更改vuex的store中状态的唯一方法，通过提交mutation修改状态，同步操作（规则上是不允许异步操作的，虽然异步也可以执行，但是对devtool调试的状态跟踪或多个状态更改操作相互依赖是很不好的，所以不要觉得只要不报错我就可以这么用，还是尽量按照规则来比较好）
Action	类似mutation，不同之处，1.通过提交mutation修改状态 2.支持异步操作
Module	模块，在大型项目中为了方便状态的管理和协作开发将store拆分为多个子模块（modules），每个子模块拥有完整的state、mutation、action、getter

Vuex的安装以及使用

安装Vuex

npm install vuex --save     // 如果安装了淘宝镜像可以使用 cnpm安装

新建store文件夹,新建一个index.js文件,引入Vue和Vuex.

目录结构:

我是将store属性抽离出去的看个人习惯

index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 导入抽离出去的属性
import store from './store'

Vue.use(Vuex)

export default new Vuex.Store({
  ...store, //Es6语法展开运算符,将方法展开

  modules: {} // 模块化Vuex
})

store.js

// 将属性分离出来便于更好的维护
export default {
    state: {},
    mutations: {},
    actions: {}
}

在main.js中注册

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './styles/base.css'
Vue.config.productionTip = false
new Vue({
  router,
  store, //注册store 组件中用this.$store访问
  render: h => h(App)
}).$mount('#app')

store中的 state,mutation,anction,getter

1.state

在state中定义属性name,给个值 "大仙" ,在组件中使用 this.$store.state.name获取定义的属性name

store.js

// 将属性分离出来便于更好的维护
export default {
    state: {
        name:'大仙' // 定义的属性
    },
    mutations: {},
    actions: {}
}

Home.vue

<template>
  <div>
    <h2>Home</h2>
    {{name}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      name:''
    };
  },
  created(){
    // this.$store.state.name 获取Vuex中的name值
    this.name=this.$store.state.name
    console.log(this.name);
    
  }
};
</script>

2.mutation 修改state的唯一方法

修改state只能通过mutation来修改包括action也是通过提交mutation去修改

store.js

    mutations: {
        //不带参数的方法
        changeName(state) {
            state.name = '修改后'
        },
        // 带参数的方法
        changeNameparameter(state, value) {
            state.name = value
        }
    },

Home.vue

<template>
  <div>
    <h2>Home</h2>
    {{this.$store.state.name}}
    <button @click="setName">没有参数</button>
    <button @click="setNameParameter('传的参数')">带参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 不带参数修改
    setName() {
      this.$store.commit("changeName");
    },

    // 带参数修改 两种方法
    setNameParameter(value) {
      // 1.载荷提交
      this.$store.commit("changeNameparameter", value);
      // 2.对象提交
      this.$store.commit({
        type:'changeNameparameter',
        value
      });

    }
  }
};
</script>

3.anction 异步修改状态

mutation中是不允许异步操作的,如果我们需要异步修改怎么办?于是Vuex为我们提供了action

store.js

    actions: {
        // 1.不带参数
        changeNameActions(context){
            // 异步修改
            setTimeout(()=>{
                context.commit('changeName')
            },1000)
        },
        // 2.带参数
        changeNameActionsParameter(context,value){
            // 异步修改
            setTimeout(()=>{
                context.commit('changeNameparameter',value)
            },1000)
        }
    }

Home.vue

<template>
  <div>
    <h2>Home</h2>
    {{this.$store.state.name}}
    <button @click="setName">没有参数</button>
    <button @click="setNameParameter('传的参数')">带参数</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 不带参数修改
    setName() {
      this.$store.dispatch("changeNameActions");
    },

    // 带参数修改 两种方法
    setNameParameter(value) {
      // 1.载荷提交
      this.$store.dispatch("changeNameActionsParameter", value);
      // 2.对象提交
      this.$store.dispatch({
        type:'changeNameActionsParameter',
        value
      });

    }
  }
};
</script>

4.getter

getter，我们可以理解为是对store中state的一些派生状态，也可以理解为一种计算属性，因为它像计算属性一样，返回值会根据它的依赖被缓存起来，且依赖对象发生改变的时候它才会被重新计算

store.js

    getters: {
        // 1.不带参数
        changeNameGetter:(state)=>{
            if(state.name==='大仙'){
                return state.name+'1111'
            }
        },
        // 2.带参数
        changeNameGetterParameter:(state)=>(value)=>{
            if(state.name==='大仙'){
                return state.name+" "+value
            }
        }
    }

Home.vue

<template>
  <div>
    <h2>Home</h2>
    {{this.$store.getters.changeNameGetter}}
    {{this.$store.getters.changeNameGetterParameter('传的参数')}}
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

vuex辅助函数的使用:

Vuex的辅助函数有:mapState, mapMutations,mapGetters,mapActions

1. State => mapState

Home.vue

<template>
  <div>
    <h2>Home</h2>
    {{value}}
    {{value1}}
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    // 在页面上直接使用即可
    ...mapState({
      value: "name", // 1使用别名
      // 2 自定义 建议不使用
      value1: state => {
        return state.name + "111";
      }
    })
  },
  methods: {}
};
</script>

2. Mutations => mapMutations

Home.vue

<template>
  <div>
    <h2>Home</h2>
    {{value}}
    {{value1}}
    <button @click="changeNameclick">Button</button>
    <button @click="changeNameparameterclick">Button</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    // 在页面上直接使用即可
    ...mapState({
      value: "name", // 1使用别名
      // 2 自定义 建议不使用
      value1: state => {
        return state.name;
      }
    })
  },
  methods: {
    ...mapMutations([
      // 将 this.changeName 映射为 this.$store.commit('changeName')
      "changeName",
      "changeNameparameter"
    ]),
    changeNameclick() {
      // this.$store.commit('changeName')
      this.changeName();
    },
    changeNameparameterclick() {
      this.changeNameparameter("传的值Mutation");
    }
  }
};
</script>

3. Action => mapActions

Home.vue

<template>
  <div>
    <h2>Home</h2>
    {{value}}
    {{value1}}
    <button @click="changeNameActionsclick">Button</button>
    <button @click="changeNameActionsParameterclick">Button</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    // 在页面上直接使用即可
    ...mapState({
      value: "name", // 1使用别名
      // 2 自定义 建议不使用
      value1: state => {
        return state.name;
      }
    })
  },
  methods: {
    ...mapActions({
      // this.changeNameActions1 映射成 this.$store.dispatch('changeNameActions')
      changeNameActions1: "changeNameActions",
      // this.changeNameActionsParameter1 映射成 this.$store.dispatch('changeNameActionsParameter')
      changeNameActionsParameter1: "changeNameActionsParameter"
    }),
    changeNameActionsclick() {
      this.changeNameActions1();
    },
    changeNameActionsParameterclick() {
      this.changeNameActionsParameter1("传的值Action");
    }
  }
};
</script>

4. getter => mapGetters

Home.vue

posted @ 2020-04-17 17:54 Daxian1996 阅读(125) 评论(0) 收藏举报

刷新页面返回顶部

Daxian1996

Vuex的学习和使用

什么是vuex？

vuex核心概念

Vuex的安装以及使用

安装Vuex

新建store文件夹,新建一个index.js文件,引入Vue和Vuex.

store中的 state,mutation,anction,getter

1.state

2.mutation 修改state的唯一方法

3.anction 异步修改状态

4.getter

vuex辅助函数的使用:

1. State => mapState

2. Mutations => mapMutations

3. Action => mapActions

4. getter => mapGetters

公告