vuex初始化 {安装,导入,创建}

1,安装依赖包

npm install vuex --save

2, 导入vuex包

import Vuex from 'vuex' Vue.use(Vuex)

3, 创建 store 对象

export default new Vuex.Store({
  state: {
    nums:666
  },
  mutations: {
不能处理异步任务,否则会导致VUE浏览器插件不工作,如定时器
  },
  actions: {
专门处理异步任务,
  },
  modules: {
  }

})

直接访问

组件访问State数据的第一种方式

this.$store.state.数据名 在template中界面可省略this.

导入函数方式访问

mapState是固定写法

• 可以理解为：mapState是state数据映射的函数，通过mapState可以获取state中的数据
• mapState(['state数据1','state数据2'])，将想要获取的state数据，作为参数传递给mapState
• 例如：mapState(['count'])，获取到的就是count数据对应的一个对象{count:f}

代码

<h1>增加数值:{{ nums }}</h1>
import { mapState } from "vuex";
//写data下面
 computed: {
    ...mapState(["nums"]),
  },

mutation的基本使用

修改数据必须使用 mutation

您不能直接修改数据,这样不利于监控数据变化,后期维护

代码

引入使用
  methods: {
  //add是 点击事件,
    add() {
      this.$store.commit("addnums");
    },
  },
  
  
//共享数据,state就是数据对象,它里面的nums是数值
//不知道写在哪看上面的实例化
  mutations: {
    addnums(state) {
      state.nums += 1
    },
  },

您还可以携带参数

代码

使用数据
  methods: {
    add2() {
      this.$store.commit("addnums2", 5);
    },
  },
 
 修改数据
  state是数据对象 state.nums 是共享数据
    mutations: {
    addnums2(state,val) {
      state.nums += val
    },
  },
  

映射函数触发 mutation

触发mutation的第二种方式

• 这里的mapMutations也是固定的名字
• mapMutations用于映射mutations方法
• 与mapState类似，都是一个映射函数，用法也一致
• 只不过mutations既然是一个函数，那么就在methods中映射

** - 最终效果相当于：**

methods: {
             add(state) {
                 state.count++
             },
             addN(state, step) {
                  state.count += step
             },
         }

代码

引入使用
import { mapState, mapMutations } from "vuex";

  methods: {
    ...mapMutations(["subnums"]),
    sub() {
      this.subnums();
    },
  },
  
  共享数据修改
    mutations: {
    subnums(state) {
      state.nums -= 1
    }
  },

携带参数

代码

组件引入使用 (不传值,传值)
 methods: {
    ...mapMutations(["subnums", "subnums2"]),
    sub() {
      this.subnums();
    },
    sub2() {
      this.subnums2(5);
    },
  },
  修改数据
    mutations: {
    subnums(state) {
      state.nums -= 1
    },
    subnums2(state,val) {
      state.nums -= val
    }
  },
  

Action

专门用来处理异步任务的,

• 异步操作都定义到actions中
  • actions中要操作数据，必须通过commit触发方法来修改
  • actions中不能直接修改store的数据，数据只能在mutations中修改
  • 异步方法必须有一个参数，context，代表当前store实例对象
    • 因为为了方便通过commit触发mutations方法
• 触发action
  • 通过store实例中的方法dispatch来调用
  • dispatch：分发的意思，异步的任务都是通过分发的方式调用的

触发action代码

引入使用
    addNN() {
      this.$store.dispatch("addN");
    },

处理异步任务:
  mutations: {
    addnums(state) {
      state.nums += 1
    },
   },

    content代表当前store实例对象 注意不是数据对象
  actions: {
      注意content不是数据对象,是实例对象new Vuex.Store本身
    addN(content) {
      setTimeout(() => {
      //调用mutations 里面的执行体
        content.commit('addnums')
      },1000)
    }
  },

触发action的时候携带参数

• 定义异步方法，第二个参数就是要给addN方法传递的参数
• 调用异步方法，第一个参数是调用的方法名，第二个参数是给addNAsync方法传递的参数

代码

引入使用
    addNN() {
      this.$store.dispatch("addN",5);
    },

处理异步任务:
  mutations: {
    addnums(state,val) {
      state.nums += val
    },
   },

    content代表当前store实例对象 注意不是数据对象
  actions: {
      注意content不是数据对象,是实例对象new Vuex.Store本身
    addN(content,val) {
      setTimeout(() => {
      //调用mutations 里面的执行体
        content.commit('addnums',val)
      },1000)
    }
  },

Action另一种方式

引入使用
  methods: {
    ...mapActions(["subN3"]),
    sub3() {
      this.subN3();
    },
  },
  执行体
    mutations: {
    addnums(state) {
      state.nums += 1
    },
  },
  异步处理调用mutations
  actions: {
    subN3(content) {
      setTimeout(() => {
        content.commit('subnums')
      },1000)
    }, 
  }
  

getter进行传递前加工处理

H1里面就是 : 星星星星星星

<h1>{{ $store.state.numx }}</h1>

  state: {
    nums: 666,
    numx:'哈哈哈'
  },

  getters: {
    showNum(state) {
      return state.numx = '星星星星星星'
  }