Vuex简单使用

发布于 / 前端 / 0 条评论

Vuex

介绍

vuex解决了组件之间同一状态的共享问题。当我们的应用遇到多个组件之间的共享问题时会需要:

多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会变得很繁琐,并且对于兄弟组件间的传递无能为力。这需要你去学习下,vue的编码中多个组件之间的通讯的做法。来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式都很脆弱,通常会导致无法维护代码。所以,这时就出现了Vuex,这是Vuex出现的背景。Vuex官网上这样描述:Vuex是一个专为Vue.js应用程序开发的状态管理模式。

他采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间的通讯,而现在有了vuex,组件就都和store通讯了。这也是为什么官网再次会提到Vuex构建大型应用的价值,如果你不打算开大大型的单页应用,使用Vuex可能会变得很繁琐,对于大型项目,可以使用Vuex作为不同组件之间的状态管理,而对于小型的项目,推荐使用HTML5特有的属性,localStroage和sessionStroage作为数据之间的传递。

上面的深入的理解可以给你对Vuex有一个简单的认识,但是Vuex的具体作用是什么呢?通俗的讲:

Vuex是一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化。

安装方式
npm install -s vuex
使用

在src目录下新建目录store,并在其目录下新建文件index.js.

Vuex的所包含的几个属性有:state,getters,mutations,actions,modules

下面分别介绍一下这几个属性:

state: vuex的基本数据,用来存储变量

getter:从基本数据(state)派生的数据,相当于state的计算属性

mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。

action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。

modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

简单实用

store/index.js

const LStore = {
  state:{
    name:"lindong",
    age:22
  },
  getters:{
    getLAge(state){
      return state.age
    }
  },
  mutations:{
    increase(state,playload){
      state.age += playload.number;
    }
  },
  actions:{
    AsIncrease({commit}){
      commit("increase")
    }
  }
}
​
export default new Vuex.Store(LStore) 

Vue文件

<script>
 data(){
    return{
        name:this.$store.state.name
    }
  },
  computed:{
    getAge(){
      return this.$store.getters.getLAge
    }
  },
  mounted(){
        console.log(this.$store.state)
  },
  methods:{
    addAge(){
      let obj = {
        number:5
      }
      this.$store.commit("increase",obj)
    }
  }
  </script>
​
<template>
  <div id="app">
    <div id="nav">
      {{name}}
   <!--   <About /> -->
     {{getAge}}
      <button @click="addAge">增加年龄</button>
    </div>
  </div>
</template>

点击增加age就会加5,但是刷新页面的话就又会变回去。

辅助函数mapGetters

辅助函数有五个,这个就挑mapGetters和mapState讲一下

首先需要引入
import {mapState,mapGetters} from 'vuex'
   ...mapState(['name','age']),
    ...mapGetters({
        getLAge:'getLAge'
    })

这里给出了两种使用情况:

以上就是vuex的简单使用,欢迎指证

转载原创文章请注明,转载自: ت » Vuex简单使用
Not Comment Found