vuexState 总结

vuexState 总结

• 安装vuex

• 命令 npm install vuex --save

• 使用的过程

• 在vue项目的src文件夹下创建一个store文件
• 在store文件中创建一个js文件
• 在js文件中写入

//  引入vuex并且在vue中使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//  创建vuex实例化对象
const store = new Vuex.Store({
   state: {
       // 可以写自己想要存储的数据 数据可以是js的任何数据类型 数据不会存储在浏览器中
       userInfo: {
           name: '',
           id: '',
           tel: '',
           sex: ''
       }
   }
})
export default store

在vue文件中使用store中存储的数据

• 要把store仓库挂载在vue的实例化对象中

• 在main.js中引入 store文件夹中的js文件

//  例如
import store from 'js文件地址'
new Vue({
    store
})

• 在要使用vuex中数据的vue文件中引入数据 以上述userInfo数据为例

第一种

• 直接使用

   <template>
       <div>   
           {{$store.state.userInfo.name}}
       </div>
   </template>

第二种写法

• 利用计算属性

    <template>
        <div>   
            {{getName}}
        </div>
    </template>

   export default {
       data() {
           return {}
       },
       computed: {
           // 利用计算属性
           getName() {
               return this.$store.state.userInfo.name
           }
       }
   }

第三种方法

• 利用mapState辅助函数

   <template>
       <div>   
           {{userInfo.name}}
       </div>
   </template>

import { mapState } from 'vuex'
   export default {
       data() {
           return {}
       },
       computed: {
           ...mapState([
               'userInfo'
           ])
       }
   }