vueX使用方法初步整理

vueX使用方法初步整理

vuex存储在内存，读取内存比读取硬盘速度要快
vuex是专为Vue.js开发的状态管理模式。
vuex用于组件之前的传值
vuex是响应式的，vuex值发生改变对应的组件也会相应的更新
刷新页面vuex存储的值会丢失

使用场景

如果不打算开发大型单页面应该，最好不要使用Vuex
中大型单页面应用可以考虑使用
简单项目可以使用简单的store模式
存放目录，一般module存放的是子模块

使用方法

安装方法

   npm install vuex --save   或  npm install vuex -S 
   cnpm install vuex --save   或  cnpm install vuex -S 
   yarn install vuex

引用方式

improt Vue from 'vue'
improt Vuex from 'vuex'
Vue.user(Vuex) // 全局应用vuex

如何使用

// moduleA.js  子模块
const moduleA = {
    
    
  state: () => ({
    
     count: 0 }),
  mutations: {
    
     ... },
  actions: {
    
     ... },
  getters: {
    
     ... }
}
export default moduleA

improt Vue from 'vue'
improt Vuex from 'vuex'
improt moduleA from 'moduleA.js'
Vue.user(Vuex) // 全局应用vuex

const store = new Vuex.Store({
    
    
    // 可以理解为vue中的data，只不过这里的数据不能直接更改
    state: {
    
    
        count: 0
    }，
    // 用来给state中的内容赋值的
    // 必须同步执行
    mutations: {
    
    
        // 此方法名可随意定义，接收两个值
        increment (state，value) {
    
    
            // 接收传入的值
            state.count = value
        }
    }，
    // 可以理解为Vuex中的计算属性
    getters: {
    
    
        // 这个方法就是在内部处理count
        // 接收两个值，一个是state，一个是getters，
        // 可以调用其中的方法，属性
        getIncrement: (state，getters) => {
    
    
            return state.count++
        }，
        getFun: (state，getters) => (id)=>{
    
    
            return state.count++
        }
    }，
    // 更加灵活的使用
    // 可以包含任意操作
    actions: {
    
    
        // Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
        increment (context) {
    
    
            context.commit('increment')
        }
    }，
    // 每个模块拥有自己的 state、mutation、action、getter、
    // 甚至是嵌套子模块——从上至下进行同样方式的分割
    modules: {
    
    
        a: moduleA // 引入的子模块
    }
})
new Vue({
    
    
  el: '#app',
  store: store, // 将store 注入到vue中，方便使用
})

// --------在组件中使用vuex-----------------------
// state中的调用方式
this.$store.state.count // 取count值
// mutations中的使用方式
this.$store.commit("increment ", 1); // 给count传值 // 传的值可以是js所有类型
// 调用getters中的方法
this.$store.getters.getIncrement // 返回 1
this.$store.getters.getFun(2) // 方法
// actions调用方法
this.$store.dispatch('increment')
// 以载荷形式分发
this.$store.dispatch('incrementAsync', {
    
    
  amount: 10
})
// 以对象形式分发
this.$store.dispatch({
    
    
  type: 'incrementAsync',
  amount: 10
})
// modules 调用
this.$store.state.a.count

本文整理内容来自 vue官方文档：https://vuex.vuejs.org/zh/
纯粹为个人理解，未完待续…

vueX使用方法初步整理

猜你喜欢