vuex的特點：

多組件共享狀態: 多個組件使用同一個數據
任何一個組件發生改變, 其他組件也要跟著發生相應的變化

安裝vuex npm install vuex：

創建實例：

import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex)const state = {name : '張三',age : 18 } const mutations = {// 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutationchangeName (state, params) {state.name = params.name},changeAge (state, params) {state.age = params.age} } const actions = {// Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutationactionsChangeAge ( context, params) {context.commit('changeAge', params)} } const getters = {// Getter 接受 state 作為其第一個參數doubleAge (state) {return state.age * 2}// 也可以使用箭頭函數的簡寫// doubleAge: state => state.age * 2 }const store = new Vuex.Store({ // 創建全局狀態管理的實例state, // 共同維護的全局狀態mutations, // 處理數據的唯一途徑, 修改state的數據只能通過mutationsactions, // 數據的異步操作處理getters // 獲取數據并渲染 })// 導出并在main.js里面引用&注冊 export default store# 引入文件： import Vue from 'vue' import App from './App.vue' import store from './store/index' Vue.config.productionTip = falsenew Vue({store, // 全局使用render: h => h(App), }).$mount('#app')# 模板：<template><div><h2>組件</h2><!-- 組件可以通過this.$store.state 獲取store中的數據 -->name: {{ this.$store.state.name }} <br>age: {{ this.$store.state.age }}<button @click="change">修改年齡</button></div> </template> <script> export default {methods: {change () {// 此方法一般用于網絡請求// dispatch: 調用actions里面的方法, 再讓actions里面的方法// 通過commit 調用mutations里面的方法this.$store.dispatch('actionsChangeAge', { age: 120 })},changeName () {// 通過$store.commit直接調用store實例中mutation里面的方法// 參數1: 要調用mutation里面的方法名, 參數2: 要傳輸的數據this.$store.commit('changeName', { name: '寶寶', age: 19})}} } </script> ----------------------------------------------------------------// 以載荷形式 store.commit('increment'，{amount: 10 //這是額外的參數 })// 或者使用對象風格的提交方式 store.commit({type: 'increment',amount: 10 //這是額外的參數 })dispatch：含有異步操作，數據提交至 actions ，可用于向后臺提交數據 this.$store.dispatch('isLogin', true);commit：同步操作，數據提交至 mutations ，可用于讀取用戶信息寫到緩存里 this.$store.commit('loginStatus', 1);state 存放基本數據 getters 從state基本數據派生出的數據(類似vue中的computed) mutations Store中更改state數據狀態的唯一途徑 actions 通過dispatch觸發actions, actions在通過commit觸發mutations。一般用于處理異步操作 modules 模塊化Vuex

總結

以上是生活随笔為你收集整理的VueX的store的简单使用心结的全部內容，希望文章能夠幫你解決所遇到的問題。

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