安裝和配置

安裝

?npm install vuex --save?

當(dāng)pack.json文件內(nèi)出現(xiàn)

?

"dependencies": {"vuex": "^3.0.1"},

?

即為安裝成功

配置(類似于vue-router)

首先新建store文件夾在文件夾內(nèi)新增index.js文件，在index.js文件內(nèi)

?

import Vue from 'vue' //引入實(shí)例Vue import Vuex from 'vuex' //引入VueX Vue.use(Vuex); //使用Vuex export default new Vuex.Store({ //將實(shí)例暴露出去 state,getters,actions,mutations })

?

在main.js中

import store from './store'new Vue({el: '#app',store,components: { App },template: '<App/>' })

vueX下的4個基本對象

state，getters，mutations，actions

State

存儲狀態(tài)。也就是變量

在store下的index.js內(nèi)，可以通過直接定義，然后通過export default直接暴露出去

const state: {count: 0 } export default new Vuex.Store({state })

在組件中可以通過computed方法，接收vuex傳來的數(shù)據(jù)

<template><div id="app">{{count}}</dev> </template> computed:{count(){return this.$store.state.count} }

mutations

提交狀態(tài)修改。也就是set、get中的set，這是vuex中唯一修改state的方式

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation,不支持異步方法(異步方法用actions),第一個默認(rèn)參數(shù)是state,

在store下的index.js內(nèi)，?

const mutations ={increment(state,payload) { //payload額外的參數(shù)，可以使一個對象state.count += payload.amount} };

也可以通過常量的方法，調(diào)用

const SET_ADD = 'SET_ADD'const mutations ={SET_ADD(state,payload) {state.count += payload.amount}, }

在組件中可以通過在methods中調(diào)用方法，來調(diào)用 vuex傳遞過來的方法

<template><div id="app">Clicked: {{ count }} times<button @click="increment">+</button></div> </template> <script>export default {methods:{increment(){this.$store.commit('SET_ADD',{amount: 10})}}} </script>

getters

派生狀態(tài)。也就是set、get中的get，類似有vue中的computed，都是用來計算 state 然后生成新的數(shù)據(jù) ( 狀態(tài) ) 的

在store下的index.js內(nèi)，接收state作為第一個參數(shù)

const getters = {evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd' //判斷奇數(shù)還是偶數(shù) };

在組件中接收

<template><div id="app">Clicked: {{ count }} times, count is {{ evenOrOdd }}.<button @click="increment">+</button><button @click="decrement">-</button></div> </template> <script>export default {computed:{count(){return this.$store.state.count},evenOrOdd(){return this.$store.getters.evenOrOdd}}, } </script>

actions

Action 提交的是 mutation，而不是直接變更狀態(tài)。

Action 可以包含任意異步操作

在store下的index.js內(nèi)，actions函數(shù)接受一個與store實(shí)例具有相同方法和屬性的context對象，因此可以調(diào)用context.commit 提交一個mutation，或者通過context.state和context.getters來獲取state和getters

actions: {increment (context) {context.commit('increment')}}

在ES6中可以簡化代碼

actions: {increment ({ commit }) {commit('increment')} }

在組件文件中，用dispatch接收

increment(){this.$store.dispatch('increment')},decrement(){this.$store.dispatch('decrement')}

當(dāng)執(zhí)行多次異步操作的時候，也可以在actions操作

incrementAsync ({ commit,dispatch}) {return new Promise((resolve, reject) => {setTimeout(() => {dispatch("alert") //分發(fā)給actionscommit('increment')resolve()}, 1000)})},alert(){console.log('hello world')}

可以使用mapSates，mapGetters,mapMutations,mapActions進(jìn)行簡化操作

其中 mapStates，mapGettters是在computed中調(diào)用的

mapMutations,mapActions是在methods中調(diào)用的

import {mapActions,mapMutations} from 'vuex'methods:{...mapActions(['increment','decrement','incrementIfOdd','incrementAsync']),...mapMutations(['increment','decrement']),}

?

轉(zhuǎn)載于:https://www.cnblogs.com/lrgupup/p/10007709.html

總結(jié)

以上是生活随笔為你收集整理的vuex入门文档的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。