vue dispatch用法_Vuex基本用法

vue dispatch用法_Vuex基本用法

 

Vuex是什么？

所谓的Vuex其实就是一个为Vue.js设计的数据仓库，就是把各个组件公用的数据放到一个仓库里面进行统一的管理

Vuex好处：

• 既使非父子组件间的数据共享也能变得简单明了
• 让程序变得更加可维护（将数据抽离了出来）
• 只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新

Vuex怎么用？

先用vue-cli安装项目框架

@vue/cli用法

Yarn

yarn global add @vue/cli

NPM

npm install -g @vue/cli

安装Vuex

Yarn

yarn add vuex

NPM

npm install vuex --save

初始化store.js

一般放到src/store/store.js下面

1.  
   import Vue from "vue";
2.  
   import Vuex from "vuex";
3.  
    
4.  
   Vue.use(Vuex)
5.  
    
6.  
   const store = new Vuex.Store({
7.  
   state: {
8.  
   test:'x'
9.  
   },
10.  
    mutations: {
11.  
    changetest(state, xxx) {
12.  
    state.test= xxx
13.  
    }
14.  
    },
15.  
    actions:{
16.  
    changetest(context, xxx) {
17.  
    context.commit('changetest',xxx)
18.  
    }
19.  
    }，
20.  
    getters: {
21.  
    test2: state => state.test
22.  
    }
23.  
    }）
24.  
    export default store;

state：相当于Vue的data

mutations：类似于事件，每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

actions: Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作

getters：可以认为是 store 的计算属性，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，接受 state 作为其第一个参数

好了，就这么简单可以用了

使用Vuex

打开main.js，导入，然后用

1.  
   import Vue from "vue";
2.  
   import App from "./App.vue";
3.  
   import store from "./store";
4.  
    
5.  
   new Vue({
6.  
   store,
7.  
   render: h => h(App)
8.  
   }).$mount("#app");

好了你可以在所有App所有子组件里面使用Vuex了

如何使用 state

子组件能通过 this.$store 访问到

1.  
   this.$store.state.test
2.  
   // x

如何使用 mutations

子组件能通过 this.$store.commit 访问到

this.$store.commit('changetest',xxx)

它会去把 changetest 提交到 mutation 执行 ，第二个是载荷(可以理解为参数)，大多数载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读

如何使用 actions

子组件能通过 this.$store.dispatch 访问到

this.$store.dispatch('changetest'xxx)

它会去把 changetest 分发到 actions 在通过 actions 提交到 mutation 执行

如何使用 getters

子组件能通过 this.$store.getters 访问到

1.  
   this.$store.getters.test2
2.  
   //x

这些是简单的使用教程，更多使用方法参考官方文档

 

相关资源：在Vuex使用dispatch和commit来调用mutations的区别详解_vue的...