vueX 的使用方法（狀態(tài)管理器）

<br />

1. state 的用法及特點(diǎn) state是共享狀態(tài)

image

image

<br />

2. mutations 的用法及特點(diǎn) 只有 mutations 才有權(quán)利修改 state 的值

image

image

image

<br />

3. Action的用法及特點(diǎn) Action 執(zhí)行異步操作 但不能修改 state 的值（要修改 state 的值，必須通過 Mutations 來修改）

image

image

image

<br />

4. getter的用法及特點(diǎn) getter 是用來裝飾 state 的數(shù)據(jù) 相當(dāng)于 vue 中的計(jì)算屬性

image

image

<br />

重點(diǎn)： this 只需要寫在js文件里面，其余文件不用寫this

<br />

遇到 vue 頁面有紅色的報(bào)錯(cuò)怎么解決

image

1. 先在vue項(xiàng)目中安裝vueX 執(zhí)行 npm i vuex --save

// store 文件夾下 index.js 就是 vuex 的文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
// state 提供公共數(shù)據(jù)源
  state: {
    count: 0, // 第一種方式訪問   this.$store.state.count
  },
  mutations: {
  },
  actions: {
  },
  getter: {
  },
  modules: {
  }
})


// 在 main.js 中 導(dǎo)入 store 并且注冊(cè)到 vue 實(shí)例中 
import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')