vue全家桶之vuex

vue全家桶之vuex

在vue中各组件的传值有很多种方式，父子间传值，兄弟之间的传值等，在嵌套关系很深的情况下我们还可以用bus总线传值，但是这些都会显得太过复杂

在vue中我们可以使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。

安装

​ 安装vuex，使用命令：npm install vuex --save

​ 我们需要在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use( Vuex )

// 创建store模块

// const store = new Vuex.Store( options ) options为store配置选项

const store = new Vuex.Store({
    state, 
    actions,
    mutations,
    getters,
})

// 导出store模块

export default store

​ 最终这个文件是要在main.js中引入的，其实直接在main文件中写如整个store都是可以的，但是会显得太过混乱，所以我们在src中创建一个文件夹。实际不管建在哪个地方都是可以的

import Vue from 'vue'
import App from './App.vue'

import store from './store'

Vue.config.productionTip = false

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

vuex中五种对象

vuex中，有默认的五种基本的对象：

• state：存储状态（变量）-------类似于vue里面的data
• getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()-------类似于computed
• mutations：修改状态，并且是同步的。在组件中使用$store.commit(’’,params)。这个和我们组件中的自定义事件类似-------类似于vue里面的methods
• actions：异步操作。在组件中使用是$store.dispath(’’)
• modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

state

​ state中存放的都是数据，作用类似于vue里面的data，但是所有的组件都快可以访问，起到组件内通信的作用

使用方式：在组件内部

 <p>{{this.$store.state.count}}</p>

​ vuex类似于bus总线，在组件内我们不能直接调用，需要从this里面找到使用

mutations

​ mutations中存放都是的方法，类似于vue组件中的methods，state中的数据只能通过mutations才能改变

​ 在sotre.js中定义mutations对象，该对象中有两个方法，mutations里面的参数，第一个默认为state，接下来的为自定义参数

const mutations = {

    ins(state){
        state.count ++
    }
}

export default mutations 

<script>
export default {
    methods:{
        add(){
         this.$store.commit('ins')
        }
    }
}
</script>

​ 我们也是通过当前this下的$store使用的。commit类似于bus总线中的$emit。

actions

​ mutations的方法都是同步的，这就有了一定的限制，引入了actions,在这个里面可以写异步的方法

const actions = {
    actionsAdd(context) {
        return context.commit('ins')
    }
}

​ context连接actions与mutations,在组件使用也有所不同，是用dispatch来触发

handleActionsAdd(n){
      this.$store.dispatch('actionsAddCount')
    }

getters

我们一般使用getters来获取我们的state，因为它算是state的一个计算属性,类似于computed

const getters = {
    getCount ( state ) {
        return state.count
    }
}

在组件内使用

 <p>{{ this.$store.getters.getCount  }} </p>