Vue2 学习记录--VueX

0 安装&使用

1 npm install vuex@3

2 index.js

创建目录 store，并创建index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

3 main.js

参见router的使用。

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

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1 state

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user:{
      code:'001',
      name:'张三',
      age:18
    },
    tokens:'abcdefg1234567'
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>User Code: {{ $store.state.user.code }}</p>
    <p>User Name: {{ $store.state.user.name }}</p>
    <p>User Age: {{ $store.state.user.age }}</p>
    <p>Tokens: {{ $store.state.tokens }}</p>
    <p>user: {{ $store.state.user }}</p>
  </div>
</template>

简化使用：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p>User Code: {{ this.user.code }}</p>
    <p>User Name: {{ this.user.name }}</p>
    <p>User Age: {{ this.user.age }}</p>
    <p>Tokens: {{ this.tokens }}</p>
    <p>user: {{ this.user }}</p>
  </div>
</template>

<script>  
export default {
  name: 'AboutView',
 
data(){
  return {
    user: this.$store.state.user,
    tokens: this.$store.state.tokens
  } 
}
}
</script>

2 getter

3 mutations

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user:{
      code:'001',
      name:'张三',
      age:18
    },
    token:'abcdefg1234567'
  },
  getters: {
  },
 mutations: {
     setToken(state, newToken){
      state.token = newToken;
    }  
  },
  actions: {
  },
  modules: {
  }
})

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h2>vuex from data()</h2>
    <p>User Code: {{ this.user.code }}</p>
    <p>User Name: {{ this.user.name }}</p>
    <p>User Age: {{ this.user.age }}</p>
    <p>Token: {{ this. token }}</p>
    <p>user: {{ this.user }}</p>
    <h2>vuex from </h2>
    <p>Token: {{ $store.state.token }}</p>
    <h2>输入token</h2>
    <input v-model="newToken" /><button @click="updateToken">修改token</button>
  </div>
</template>

<script>  
export default {
  name: 'AboutView',
 
data(){
  return {
    user: this.$store.state.user,
    token: this.$store.state.token,
    newToken:''
  } 
}
,
  methods:{
    updateToken(){
     this.$store.commit('setToken', this.newToken);
     this.token = this.$store.state.token;
    }
  },
  
}
</script>

4 actions

异步时用的

5 modules