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')