vuex的使用

vuex 使用

标准用法

放在main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import Vuex from 'vuex'
Vue.use(Vuex);


// 创建store对象
const store = new Vuex.Store({
  // 放数据的
  state: {
    count: 0
  },

  // 放方法
  mutations: {

    // 方法是用来修改state里的数据的
    increment(state) {
      state.count++
    },

    // 你给我一个数字我就加多少
    // 参数1必须是state
    // 把你的参数写到参数2
    // vuex最多只能传一个参数,如果非要传多个，就包成对象或者数组
    addNum(state,num){

      window.console.log(num,num2);
      state.count += num;

    },

    addYidui(state,nums){

      for(var i = 0; i < nums.length; i++){

        state.count += nums[i];
      }
    }
  }
})


new Vue({
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

app.vue

<template>
    <div>
      <h1>我是app.vue</h1>
      <p>store里的count是：{{ $store.state.count }}</p>
      <button @click="$store.commit('increment')">修改count的值</button>

      <son></son>

    </div>
</template>

<script>
import son from './son.vue'
export default {
  components:{
    son
  }
}
</script>

<style>

</style>

son.vue

<template>
    <div class="son">
        <h3>son.vue</h3>

        <p>store里的count是：{{ $store.state.count }}</p>

        <button @click="sum1">修改count的值，让它+1</button>
        <button @click="sum5">给count加5</button>
        <button @click="sumYidui">给count加一堆</button>
    </div>
</template>

<script>
export default {

    methods: {
        sum1(){

            // this.$store.state.count++;

            // 要调用mutations中得我方法要用commit
            // 以下是官方推荐的
            this.$store.commit('increment')
        },

        sum5(){

            this.$store.commit('addNum',5)
        },

        sumYidui(){

            this.$store.commit('addYidui',[5,10,20,25])
        }
    },
}
</script>

<style>

.son{
    width: 300px;
    height: 300px;
    background-color: #f00;
}
</style>

示意图

项目

1. 在vue中导入 vuex : npm install vuex --save
2. 在src中设置 router 文件夹用来保存vuex 数据

//2.1   导入vuex 
	import Vue from 'vue'
	import Vuex from 'vuex'
	Vue.use(Vuex)
//2.2 
```实例化仓库对象
	export default new Vuex.Store({
	state: {  					 //保存内容区域
        userInfo:{				//保存内容
            name:"",
            intro:"",
            photo:"",
            email:"",
            id:"",
            mobile:"",
            token:"",
        }
    },
    mutations: {				//调取的方法区      
        changeUserInfo(state,newObj){   // state  保存的内容   
        						//newObject  可以存一个数字 一个数组 一个对象
            Object.assign(state.userInfo,newObj)
            		//使用es6 新语法  userInfo  (特点会给userInfo赋值 newObj内部没有的数据不会进行赋值)
            window,localStorage.setItem('userInfo',JSON.stringify(state.userInfo))
            //使用vuex的位置都需要执行的代码段  就写到后面  
            //这里就是获取到uersInfo中的值
        }
    }
})



在   全局样式中- 导入
//导入 store
  import store from './store'
  //在vue实例化对象内挂载
  new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

保存数据到 vuex中

this.$store.commit('changeUserInfo' , this.form)
				//changeUserInfo :  数据库中保存内容的名字
				//  this.form    :   需要保存的数据

获取vuex中的数据

 <img class="icon" :src="$store.state.userInfo.photo" alt />
            {{ $store.state.userInfo.name }}//直接使用点语法