安裝和配置

安裝

?npm install vuex --save?

當pack.json文件內出現

?

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

?

即為安裝成功

配置(類似于vue-router)

首先新建store文件夾在文件夾內新增index.js文件，在index.js文件內

?

import Vue from 'vue' //引入實例Vue import Vuex from 'vuex' //引入VueX Vue.use(Vuex); //使用Vuex export default new Vuex.Store({ //將實例暴露出去 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

存儲狀態。也就是變量

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

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

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

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

mutations

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

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

在store下的index.js內，?

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

也可以通過常量的方法，調用

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

在組件中可以通過在methods中調用方法，來調用 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

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

在store下的index.js內，接收state作為第一個參數

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

在組件中接收

<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，而不是直接變更狀態。

Action 可以包含任意異步操作

在store下的index.js內，actions函數接受一個與store實例具有相同方法和屬性的context對象，因此可以調用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')}

當執行多次異步操作的時候，也可以在actions操作

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

可以使用mapSates，mapGetters,mapMutations,mapActions進行簡化操作

其中 mapStates，mapGettters是在computed中調用的

mapMutations,mapActions是在methods中調用的

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

?

轉載于:https://www.cnblogs.com/lrgupup/p/10007709.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。