vuex

第一步:安装指令 npm install vuex --save

在package.json中可以看到版本 

在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后export default导出store：

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex

//使用vuex
Vue.use(Vuex);

//创建Vuex实例
const store = new Vuex.Store({});

export default store; //导出store

!!!!!!!!注意图上有错误:new Vuex.Store S要大写否则报错  

然后我们在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象；

import Vue from 'vue'
import App from './App'
import router from './router'

import store from './store'


Vue.config.productionTip = false
Vue.config.devtools = true // 这里改为 false


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: {
    App
  },
  template: '<App/>'
})

下面就开始 我们的胡写乱造了

state

在state中储存变量,获取我们定义的数据 (类似data的作用)

获取方法:this.$store.变量名

写法1:

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex

//使用vuex
Vue.use(Vuex);

//创建Vuex实例
const store = new Vuex.Store({
  state: {
    name: '安稳',
    age: 18
  }
});

export default store; //导出store

写法2:

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex

//使用vuex
Vue.use(Vuex);


// 注意必须写在Vuex实例上面 不然不会报错但是也不会出效果
const state = {
  name: '安稳',
  age: 18
}

//创建Vuex实例
const store = new Vuex.Store({
  state
});


export default store; //导出store

getters

vuex官方API提供了一个getters,类似vue的computed计算属性。

getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果。

 

获取方法:this.$store.getters.方法名

写法1:

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex

//使用vuex
Vue.use(Vuex);


// 注意必须写在Vuex实例上面 不然不会报错但是也不会出效果
const state = {
  name: '安稳',
  age: 18
}
const store = new Vuex.Store({
  state: {
    name: '安稳',
    age: 18
  },
  getters: {
    isname(state) { //接收一个参数state， 这个参数就是我们用来保存数据的那个对象；
      return state.name
    },
    isage(state) {
      return state.age + 1
    }
  }
});

export default store; //导出store

写法2:

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex

//使用vuex
Vue.use(Vuex);


// 注意必须写在Vuex实例上面 不然不会报错但是也不会出效果
const state = {
  name: '安稳',
  age: 18
}
// vuex官方API提供了一个getters
const getters = {
  isname(state) { //接收一个参数state， 这个参数就是我们用来保存数据的那个对象；
    return state.name
  },
  isage(state) {
    return state.age
  }
}

//创建Vuex实例
const store = new Vuex.Store({
  state,
  getters
});


export default store; //导出store

以下的例子都只写一种  定义好之后扔进Vuex.Store里面

mutations

mutations 也是一个对象 用来放修改state初始化的方法   使用 传入state 或额外的参数 利用vue的双向数据驱动进行值的改变

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex

//使用vuex
Vue.use(Vuex);


// 注意必须写在Vuex实例上面 不然不会报错但是也不会出效果
const state = {
  name: '安稳',
  age: 18
}
// vuex官方API提供了一个getters
const getters = {
  isname(state) { //接收一个参数state， 这个参数就是我们用来保存数据的那个对象；
    return state.name
  },
  isage(state) {
    return state.age
  }
}
//mutations 也是一个对象 用来放修改state初始化的方法
//使用 传入state 或额外的仓鼠 利用vue的双向数据驱动进行值的改变

const mutations = {
  addage(state) {
    state.age = state.age + 1
  },
  jianage(state) {
    state.age = state.age - 1
  }
}

//创建Vuex实例
const store = new Vuex.Store({
  state,
  getters,
  mutations
});


export default store; //导出store

组件中使用:

<template>
  <div class="vuex">
    <input type="text" v-model="$store.state.name" />
    <input type="text" v-model="$store.state.age" />
    <button @click="jianfun">-</button>
    <button @click="addfun">+</button>

    <p>{{this.$store.getters.isname}}</p>
    <p>{{this.$store.getters.isage}}</p>
  </div>
  <!-- 使用vuex来保存我们需要管理的状态值，值一旦被修改，所有引用该值的地方就会自动更新 -->
</template>

<script>
export default {
  name: "vuex",
  data() {
    return {
      msg: "123",
      comsg: ""
    };
  },
  methods: {
    addfun() {
      debugger;
      this.$store.commit("addage");
    },
    jianfun() {
      this.$store.commit("jianage");
    }
  }
};
</script>

这不是理想的改变值的方式

Actions

vuex提供了actions，这个actions也是个对象变量，最大的作用就是里面的Action方法 可以包含任意异步操作，这里面的方法是用来异步触发mutations里面的方法，actions里面自定义的函数接收一个context参数和要变化的形参，context与store实例具有相同的方法和属性，所以它可以执行context.commit(' ')。

下面改写代码

使用组件中只变动这里:

methods: {
    addfun() {
      this.$store.dispatch("addfun");
    },
    jianfun() {
      this.$store.dispatch("jianfun");
    }
  }

store中

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vuex

//使用vuex
Vue.use(Vuex);


// 注意必须写在Vuex实例上面 不然不会报错但是也不会出效果
const state = {
  name: '安稳',
  age: 18
}
// vuex官方API提供了一个getters
const getters = {
  isname(state) { //接收一个参数state， 这个参数就是我们用来保存数据的那个对象；
    return state.name
  },
  isage(state) {
    return state.age
  }
}
//mutations 也是一个对象 用来放修改state初始化的方法
//使用 传入state 或额外的参数 利用vue的双向数据驱动进行值的改变

const mutations = {
  addage(state) {
    state.age = state.age + 1
  },
  jianage(state) {
    state.age = state.age - 1
  }
}

const actions = {
  addfun(context) { //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
    context.commit('addage');
  },
  jianfun(context) { //同上注释
    context.commit('jianage');
  },
};

//创建Vuex实例
const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});


export default store; //导出store

 

下面我们直接传入dispatch中的第二个参数，然后在actions中的对应函数中接受参数在传递给mutations中的函数进行计算：

组件中  

methods: {
    addfun() {
      this.$store.dispatch("addfun");
    },
    jianfun() {
      var a = 8;
      this.$store.dispatch("jianfun", a);
    }
  }

vuex

可以发现 我们在组件中使用vuex内的方法是都是通过this使用的 

this.$store.dispatch("方法名");  actions
this.$stroe.state.变量名;　　　　　state
this.$store.getters.变量名;　　　　getters
this.$store.commit("方法名");　　mutations

也可以mapState、mapGetters、mapActions

import { mapState, mapGetters, mapActions } from "vuex";    
mapActions写在方法里面   

  computed: {
    ...mapState({
      count: state => state
    }),
    //  ...mapGetters(["isname", "isage"]) //这是直接引用 也可以换名字用

    ...mapGetters({
      cy1: "isname", // 映射 `this.cy1` 为 `store.getters.isname`
      cy2: "isage"
    })
  },
  methods: {
    ...mapActions({
      add: "addfun",
      jian: "jianfun"
    })
    // ...mapActions(['addfun','jianfun'])    直接用

  }

如果使用简写...mapActions需要传参 直接调用的时候传入即可

<h1>{{count}}</h1>
<p>{{isname}}</p>
<p>{{isage}}</p>
<p>{{cy1}}</p>
<p>{{cy2}}</p>

入门到此结束了~ by~