vueX 的使用方法（状态管理器）

<br />

1. state 的用法及特点 state是共享状态

image

image

<br />

2. mutations 的用法及特点 只有 mutations 才有权利修改 state 的值

image

image

image

<br />

3. Action的用法及特点 Action 执行异步操作 但不能修改 state 的值（要修改 state 的值，必须通过 Mutations 来修改）

image

image

image

<br />

4. getter的用法及特点 getter 是用来装饰 state 的数据 相当于 vue 中的计算属性

image

image

<br />

重点： this 只需要写在js文件里面，其余文件不用写this

<br />

遇到 vue 页面有红色的报错怎么解决

image

1. 先在vue项目中安装vueX 执行 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 提供公共数据源
  state: {
    count: 0, // 第一种方式访问   this.$store.state.count
  },
  mutations: {
  },
  actions: {
  },
  getter: {
  },
  modules: {
  }
})


// 在 main.js 中 导入 store 并且注册到 vue 实例中 
import store from './store'

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