Vue项目搭建与开发(四): Vuex使用

玖柒的小窝

修改于 2021-11-08 13:58:25

4990

修改于 2021-11-08 13:58:25

文章被收录于专栏：各类技术文章~各类技术文章~

什么是Vuex

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

官方链接：vuex.vuejs.org/

从中我们可以关注到，这应该是一个关于状态管理的工具，简单的理解就是我们的数据状态该怎么变化，如何控制，可以通过Vuex来控制。

比如我们的登录状态、还有一些组件需要用到的data，如果通过仅通过组件间互相传值，一旦项目变大，非常的不好管理。引入Vuex，我们就只需要把这些值定义在Vuex中，即可在整个Vue项目的组件中使用。

Vuex使用方式

在Vuex里我们主要要学会使用store，即这是一个仓库，它包含着我们应用的大部分状态，Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

vuex安装 npm i vuex -s

库的安装同npm方式依赖进来，这时候我们可以在src目录下新建一个store文件夹，并创建index.js文件，写上以下代码，初始化store

import Vue from 'vue'
import Vuex from 'vuex'
//挂载
VuexVue.use(Vuex)
//创建VueX 对象
const store = new Vuex.Store(
{    state:{      
  //存放的键值对就是所要管理的状态     
   name:'Hello VueX',
    permission:[],
     }
})
export default store
复制代码

store使用

在main.js文件里引入store

import store from './store'
new Vue({  router,    store,  render: h => h(App),}).$mount('#app')
复制代码

并将其挂载到vue对象里，之后我们就可以在组件里使用到这个数据了。

在组件里使用store {{this.$store.state.name}}

如上在任何某个组件里可以取到对应的值

可以看到在组件里显示出了在state里定义的name值。

一个简单的使用方式就是这样可以完成了。

Vuex成员列表

state：存放数据状态,即定义各种数据。
mutations：state的成员操作。

mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除。

并且更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,这是重点，同时

**mutation 必须是同步函数，**要记住

mutations: {  
  changeNewName (state) {    
    // 变更状态    
    state.name="Hello Friend"  
  }}
复制代码

同样的在store里定义mutations，并增加一个方法，这个方法修改了state的值。在组件里调用的方式如下

this.$store.commit('changeNewName')
复制代码

这会直接出发changeNewName方法，改变name的值,界面的状态就会响应氏的改变。同时store.commit 还可以传入额外的参数,参数类型自己定义

changeNewName (state,name) {   
 // 变更状态   
 state.name="Hello Friend "+name
}
复制代码

我们把方法改成增加一个参数，那么我们在commit的时候就多传一个参数

this.$store.commit('changeNewName','love')
复制代码

getters：加工state成员给外界。 const store = new Vuex.Store({ state:{ //存放的键值对就是所要管理的状态 name:'Hello VueX', permission:[], }, getters: { changeName: state => { return state.name.substring(0,5) } }})

在Vuex对象里定义getters，我们可以定义一个方法，返回的是取state 里name字段的前5个字符，然后在组件里调用。

mounted() {  
  console.log('取store的值',this.$store.getters.changeName)
}
复制代码

在组件的mounted方法里可以像上面这样直接调用，然后拿到结果

可以看到调用了changeName方法，并返回了对应的结果。

actions：可以做异步操作数据。

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

actions的调用方式是通过 this.$store.dispatch("changeNewName",'love actions')

actions:{  
  changeNewName ({ commit },payload) 
{        // 变更状态      
  commit('changeNewName',payload)   
 }}
复制代码

这样便是触发了mutations 中 changeNewName方法,更改了我们state。

同时store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。

modules ：模块化状态管理

这里可以帮助我们把store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，官方所示，基本其他使用方式都一样

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
复制代码

这一块后续在补充一篇来详解。