vuex

Posted 2022-03-26 chen-yi-yi

第一步:安装指令 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~