第一步安装vuex
1 npm i vuex -S
在src文件夹下面创建store文件夹，里面创建index.js，写下如下代码：
1 mport Vue from 'vue'
2 import Vuex from 'vuex'
3
4 Vue.use(Vuex)
5
6 export default new Vuex.Store({
7 state: {
8 },
9 getters: {
10 },
11 mutations: {
12 },
13 actions: {
14 },
15 modules: {
16 }
17 })
接下来在main.js 文件中引入 /store/index.js
1 import Vue from 'vue'
2 import App from './App.vue'
3 import router from './router'
4 import store from './store'
5
6 Vue.config.productionTip = false
7
8 new Vue({
9 router,
10 store,
11 render: function (h) { return h(App) }
12 }).$mount('#app')
在state属性里面添加数据
1 state: {
2 num:1,
3 url:"https://www.cnblogs.com/"
4},
单页中调取state里面的数据
1 <div>
2 num:<span>{{$store.state.num}}</span>
3 </div>
4 <div>
5 url:<span>{{$store.state.url}}</span>
6 </div>
此外，还可以使用辅助函数 ...mapState
1 import { mapState } from 'vuex';
2 export default {
3 name: 'HomeView',
4 computed:{
5 ...mapState([
6 'num',
7 'url'
8 ]),
9 ...mapState({
10 number:'num',
11 local:'url'
12 })
13 }
14 }
1 <div>
2 num:<span>{{num}}</span>
3 url:<span>{{url}}</span>
4 </div>
5 <div>
6 num:<span>{{number}}</span>
7 url:<span>{{local}}</span>
8 </div>
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
mutation必须是同步函数
1 mutations: {
2 increment(state){
3 state.num++
4 },
5 incrementBy(state,num){
6 state.num = num.num
7 }
8 },
mutations里面的方法第一个参数是state对象，第二个参数是载荷（载荷可以是对象，包含的字段更多）。
1 addNum(){
2 this.$store.commit('increment')
3 },
4 setNum(){
5 this.$store.commit('incrementBy',{num:this.figure})
6 }
触发addNum方法时，num的值会自增长
触发setNum方法时，num的值会变成 figure
mutations第二种提交方式
1 setNum(){
2 this.$store.commit({
3 type:'incrementBy',
4 num:this.fugure
5 })
6 }
type属性是 mutations中的方法名称
这种提交方式将整个对象都作为载荷传给 mutations中的函数
在vue组件中也可以使用 ...mapMutations 辅助函数
1 import { mapMutations, mapState } from 'vuex';
1 methods:{
2 ...mapMutations([
3 'increment',
4 'incrementBy'
5 ]),
6 addNum(){
7 this.increment()
8 },
9 setNum(){
10 this.incrementBy({num:this.fugure})
11 }
12 }
tip：在vue2中 this.$store.state.num++ 也可以改变num （不推荐使用嗷）
getter可以认为是 store 的计算属性
第一个参数 state对象
第二个参数 getter对象
1 state: {
2 todos:[
3 {id:1,name:'张三'},
4 {id:2,name:'李四'},
5 {id:3,name:'王五'}
6 ]
7 },
1 getters: {
2 todos(state){
3 return state.todos
4 },
5 todoCount(state,getters){
6 return getters.todos.length
7 },
8 getTodoById:(state)=>(id)=>{
9 return state.todos.find(todo=>todo.id==id)
10 }
11 },
...mapGetter 辅助函数
1 import { mapGetters, mapMutations, mapState } from 'vuex';
1 computed:{
2 ...mapState([
3 'num',
4 'url'
5 ]),
6 ...mapState({
7 number:'num',
8 local:'url'
9 }),
10 ...mapGetters([
11 'todos',
12 'todoCount',
13 'todoById'
14 ])
15 },
1 getTodo(){
2 console.log(this.todos);
3 },
4 getTodoCount(){
5 console.log(this.todoCount);
6 },
7 getTodoById(){
8 console.log(this.todoById(2));
9 }
Action 类似于mutation， 不同在于：
Action提交的是mutation，而不是直接更改state
Action可以包含异步操作
1 export default new Vuex.Store({
2 state: {
3 num:1,
4 url:"https://www.cnblogs.com/",
5 todos:[
6 {id:1,name:'张三'},
7 {id:2,name:'李四'},
8 {id:3,name:'王五'}
9 ]
10 },
11 getters: {
12 todos(state){
13 return state.todos
14 },
15 todoCount(state,getters){
16 return getters.todos.length
17 },
18 todoById:(state)=>(id)=>{
19 return state.todos.find(todo=>todo.id==id)
20 }
21 },
22 mutations: {
23 increment(state){
24 state.num++
25 },
26 incrementBy(state,num){
27 state.num = num.num
28 }
29 },
30 actions: {
31 increment(context){
32 context.commit('increment')
33 }
34 }
35 })
也可以写成这样：
1 actions: {
2 increment({commit}){
3 commit('increment')
4 }
5 },
在组件中调用：
1 this.$store.dispatch('increment')
Actions 支持同样的载荷方式和对象方式：
带有载荷的方法
1 actions: {
2 incrementBy({commit},num){
3 commit('incrementBy',num.num)
4 }
5 },
组件中调用
1 this.$store.dispatch('incrementBy',{
2 num:this.figure
3 })
或者：
1 this.$store.dispatch({
2 type:'incrementBy',
3 num:this.figure
4 })
组件中使用 ...mapActions 辅助函数
1 ...mapActions({
2 increase:'increment',
3 increaseBy:'incrementBy'
4 }),
5 addNum(){
6 this.increase()
7 },
8 setNum(){
9 this.increaseBy()
10 },
标签：基本,incrementBy,state,num,todos,使用,vuex,id,store From： https://www.cnblogs.com/art-crane/p/16649364.html